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 :
Total views : 484553
2 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