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 :
- 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>
<!------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 :
Reference:
What’s your Reaction?
+1
1
+1
+1
+1
+1
+1
Total views : 1113434
6 comments
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.
LWCMapMarker is LWC component
Hi,
Is this possible to display Account type or other fields related to account object on Maps? Pls advice
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',
},
];
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?
HI @Sai,
you can call method on click the marker in map and open the salesforce record