lightning:map – Show Contacts Location On Google Map.


“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 }" >
view raw LightningMap hosted with ❤ by GitHub


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:


<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">
<!-- the map component -->
<aura:if isTrue="{!v.mapMarkers.length > 0}" >
mapMarkers="{! v.mapMarkers }"
center="{! v.centerObj }"
zoomLevel="{! v.zoomLevel }"
markersTitle="{! v.markersTitle }"
showFooter="{ !v.showFooter }" >
view raw LightningMapCmp hosted with ❤ by GitHub


doInit : function(component, event, helper) {
let action = component.get("c.fetchContacts");
let state = response.getState();
if(state =='SUCCESS'){
let result = response.getReturnValue();
console.log('Result returned: ' +JSON.stringify(result));
var contacts = component.get("v.conObj");
console.log('Something went wrong! ');


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


.THIS #container{
border: 1px solid rgb(221, 219, 218);


public class LightningMapCntrl {
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;

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.






Arun Kumar


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s