Display Maps in Lightning Web Component Salesforce

by Rijwan Mohmmed
display-maps-in-lightning-web-component-salesforce-techdicer

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.

display-maps-in-lightning-web-component-salesforce-techdicer
display-maps-in-lightning-web-component-salesforce-techdicer

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

Output :

display-maps-in-lightning-web-component-salesforce-techdicer
display-google-map-in-lightning-web-component-salesforce-techdicer

Reference:

  1. Salesforce LWC Maps
What’s your Reaction?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

You may also like

6 comments

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.

Reply
Rijwan Mohmmed December 20, 2022 - 4:12 pm

LWCMapMarker is LWC component

Reply
sai shanmukh August 9, 2023 - 10:31 am

Hi,

Is this possible to display Account type or other fields related to account object on Maps? Pls advice

Reply
Rijwan Mohmmed August 9, 2023 - 10:41 am

Hi @Sai you can put these things in description field
https://developer.salesforce.com/docs/component-library/bundle/lightning-map/documentation
mapMarkers = [
{
location: {
City: 'San Francisco',
Country: 'USA',
PostalCode: '94105',
State: 'CA',
Street: 'The Landmark @ One Market, Suite 300',
},
value: 'location001',
title: 'The Landmark Building',
description:
'The Landmark is considered to be one of the city's most architecturally distinct and historic properties', //escape the apostrophe in the string using '
icon: 'standard:account',
},
];

Reply
sai shanmukh August 9, 2023 - 10:41 am

Is it possible to link salesforce record on the map?
Also pls let me know if account fields (such as account type, revenue) can be used to display on maps?

Reply
Rijwan Mohmmed August 9, 2023 - 10:48 am

HI @Sai,
you can call method on click the marker in map and open the salesforce record

Reply

Leave a Comment