1 supporter
Display Maps in Lightning Web Component ...

Display Maps in Lightning Web Component Salesforce

May 27, 2022

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

Check my Blog : https://techdicer.com/

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;




Enjoy this post?

Buy rijwansfdc a coffee

1 comment