Display Maps in Lightning Web Component Salesforce

by Rijwan Mohmmed

Hello friends, today I am going to share the build to Display Maps in Lightning Web Component Salesforce.

Also, check this: Get image from rich text field in Salesforce

Salesforce provides a lightning-map component that shows one or more locations. Lighting Design System’s map styling is used for this component. 
So, it is better to use it.


Key Highlights :

  1. We can show different -2 addresses on Map
  2. We can Zoom -In and Zoom – Out Map.
  3. Can show a marker for location.

Code :

First of all, we create an Apex class to fetch account data. Here I am taking into account records because it has standard address fields.


public class AccountDataController {
    @AuraEnabled (cacheable=true)
    public static List<Account> fetchAccounts(){
        return [SELECT Id, Name, BillingStreet, BillingCity, BillingState, BillingPostalCode, BillingCountry 
                FROM Account LIMIT 10];       


	<div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
										<span>Display Maps in Lightning Web Component Salesforce</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
	</div> <br/>
	<!-- create card -->
	<lightning-card variant="Narrow" title="Salesforcer Map" icon-name="standard:location">
		<div class="slds-var-p-around_small">
			<lightning-map map-markers={mapMarkers} markers-title={markersTitle} zoom-level={zoomLevel}>


import { LightningElement, wire, track } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountDataController.fetchAccounts';

export default class LWCMapMarker extends LightningElement {
    @track error;
    @track mapMarkers = [];
    @track markersTitle = 'Accounts';
    @track zoomLevel = 4;

    /* Load address from Controller */
    @wire(fetchAccounts, {})
    wireAccount({ error, data }) {
        if (data) {
            data.forEach(dataItem => {
                this.mapMarkers = [...this.mapMarkers,
                    location: {
                        City: dataItem.BillingCity,
                        Country: dataItem.BillingCountry,
                    icon: 'custom:custom26',
                    title: dataItem.Name,
            this.error = undefined;
        } else if (error) {
            this.error = error;

Output :



  1. Salesforce LWC Maps

You may also like


Stacey December 20, 2022 - 3:09 pm

New to code here…Using Developer Console
You have first “First of all, we create an Apex class” so I know where to insert this code but then the Second and Third steps do not define where to insert the code. This was exactly what I was looking for to accomplish my requirement. But, I am assuming step #3 goes in the Controller but where does Step #2 go? The Component?

I would love to see the additional steps where to insert the code in Developer Console.

Rijwan Mohmmed December 20, 2022 - 4:12 pm

LWCMapMarker is LWC component


Leave a Comment