Display Maps in Lightning Web Component Salesforce

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.

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>

    <!------Header------->

    <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/>

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

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

        }

    }

}