banner1

“lightning: map” component displays a map of one or more locations on google map.

Displaying map in the lightning experience is much easier now, we can use the “lightning: map” component that will plot the map with the address marker in the lightning component. The best thing that we can show more than one address marker on the map.

<lightning:map mapMarkers="{! v.mapMarkers }"
center="{! v.centerObj }"
zoomLevel="{! v.zoomLevel }"
markersTitle="{! v.markersTitle }"
showFooter="{ !v.showFooter }" >
</lightning:map>
view raw LightningMap hosted with ❤ by GitHub

3

One more useful attribute –

listView: Use this attribute to display or hides the list of locations that you passed in the mapMarker object. Valid values are visible, hidden, or auto. This value defaults to auto, which shows the list only when multiple markers are present. Passing in an invalid value hides the list view.

For the demonstration purpose, I have used this component (lightning:map) to show all Contacts location on google map for an Account.

Find the component code below:

LightningMapCmp:

<aura:component controller="LightningMapCntrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<!-- aura attributes -->
<aura:attribute name="mapMarkers" type="Object"/>
<aura:attribute name="centerObj" type="Object" />
<aura:attribute name="zoomLevel" type="Integer" />
<aura:attribute name="markersTitle" type="String" />
<aura:attribute name="showFooter" type="Boolean" />
<aura:attribute name="recordId" type="string"/>
<aura:attribute name="conObj" type="Contact[]"/>
<!-- Init handlers-->
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<div class="slds">
<div id="container">
<div class="slds-page-header">
CONTACTS ON MAP.
</div>
<!-- the map component -->
<aura:if isTrue="{!v.mapMarkers.length > 0}" >
<lightning:map
mapMarkers="{! v.mapMarkers }"
center="{! v.centerObj }"
zoomLevel="{! v.zoomLevel }"
markersTitle="{! v.markersTitle }"
showFooter="{ !v.showFooter }" >
</lightning:map>
</aura:if>
</div>
</div>
</aura:component>
view raw LightningMapCmp hosted with ❤ by GitHub

LightningMapCmpController:

({
doInit : function(component, event, helper) {
let action = component.get("c.fetchContacts");
action.setParams({
"accountId":component.get("v.recordId")
});
action.setCallback(this,function(response){
let state = response.getState();
if(state =='SUCCESS'){
let result = response.getReturnValue();
console.log('Result returned: ' +JSON.stringify(result));
component.set("v.conObj",result);
var contacts = component.get("v.conObj");
helper.loadMap(component,event,helper,contacts);
}else{
console.log('Something went wrong! ');
}
});
$A.enqueueAction(action);
}
})

LightningMapCmpHelper:

({
loadMap : function(component,event,helper,contacts) {
var mapsArray = [];
for(let index=0; index < contacts.length; index++){
var Mobj = {
location: {
Street: contacts[index].MailingStreet,
City: contacts[index].MailingCity,
PostalCode: contacts[index].MailingPostalCode,
State: contacts[index].MailingState,
Country: contacts[index].MailingCountry
},
icon: 'standard:contact',
title: contacts[index].Name,
description: contacts[index].Phone
}
mapsArray.push(Mobj);
}
component.set('v.mapMarkers', mapsArray);
component.set('v.centerObj', {
location: {
City: 'Noida'
}
});
component.set('v.zoomLevel', 12);
component.set('v.markersTitle', 'Contacts locations');
component.set('v.showFooter', true);
}
})

LightningMapCmpCSS:

.THIS #container{
border: 1px solid rgb(221, 219, 218);
}
view raw LightningMapCmpCSS hosted with ❤ by GitHub

LightningMapCntrl:

public class LightningMapCntrl {
@AuraEnabled
public static List<Contact> fetchContacts(String accountId){
List<Contact> conList = [Select Id,Name,Phone,MailingCity,MailingStreet,MailingPostalCode,MailingState,MailingCountry from Contact where accountId=:accountId];
return conList;
}
}
view raw LightningMapCntrl hosted with ❤ by GitHub

Note: Add this component on the Account detail page using lightning app builder and make sure that Account record should have one or more contact with ‘Mailing Address’ filled.

 

1

4

🙂

Thank

Arun Kumar