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 :

We can show different -2 addresses on Map
We can Zoom -In and Zoom – Out Map.
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.

AccountDataController.cls:

public class AccountDataController {

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

LWCMapMarker.HTML:

<template>
    
    <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>
                            </span>
                        </div>
                        <div class="slds-media__body">
                            <div class="slds-page-header__name">
                                <div class="slds-page-header__name-title">
                                    <h1>
                                        <span>Display Maps in Lightning Web Component Salesforce</span>
                                        <span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <br/>
    
    <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}>
            </lightning-map>
        </div>
    </lightning-card>
</template>

LWCMapMarker.JS:

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;
        }
    }
}

Buy rijwansfdc a coffee

About rijwansfdc

salesforce blogger

Display Maps in Lightning Web Component Salesforce