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