Salesforce Lightning:map - Show Locations on Google Map
In the Salesforce winter 19 release, Salesforce introduced an awesome feature called lightning:map component that shows the Google maps on lightning experience but this component is available in API version 44.0 and later version.
A lightning:map component displays one or more locations on a Google map with the help of geocoding information and mapping symbolism from the Google maps.
In this blog, we are going to discuss the lightning:map component. This component marks the locations on google maps by using the sObject (Account, contact, etc) address details.
We can pass markers to the lightning component to describe the locations to map. We can pass the map-markers property to show the location on the map. A marker contains the Location and Descriptive information.
Location Information:
Coordinate pair of longitude and latitude or a set of address components like Street, state, city, country, and postal code.
Descriptive Information:
This information contains title, description, and symbol which is information appropriate to the marker but not explicitly identified with the location.
Don't forget to check out: Formula to Get Time Zone Based on Area Code in Salesforce
Lightning Map Component Attributes:
- MapMarkers: It is an array of markers that provide the location.
- Center: It describes the center location of a map. If you don’t want to define it then it automatically adapts.
- zoomLevel: It provides the zoom level relating to Google map API, defined according to the screen.
- markersTitle
- showFooter
Let’s take an example, to better understand the Lightning:map component, This example will show the locations of Account through the predefined field billing address.
- Create a Lightning component and it's named ShowAddressDetailsComp.cmp
<aura:component controller="ShowAddressDetails"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
access="global">
<aura:attribute name="mapMarkersData" type="Object"/>
<aura:attribute name="mapCenter" type="Object"/>
<aura:attribute name="zoomLevel" type="Integer" default="4" />
<aura:attribute name="markersTitle" type="String" />
<aura:attribute name="showFooter" type="Boolean" default="true"/>
<aura:attribute name="accObj" type="Account[]"/>
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<aura:if isTrue="{!v.mapMarkersData.length > 0}" >
<lightning:map mapMarkers="{! v.mapMarkersData }"
center="{! v.mapCenter }"
zoomLevel="{! v.zoomLevel }"
markersTitle="{! v.markersTitle }"
showFooter="{ !v.showFooter }" />
</aura:if>
</aura:component>
- Now, create a JavaScript controller for the lightning component. It's named ShowAddressDetailsCompController.js.
({
doInit : function(component, event, helper) {
let action = component.get("c.getLocation");
action.setParams({
// "Id":component.get("v.recordId")
// "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.accObj",result);
component.set('v.mapMarkersData',response.getReturnValue());
component.set('v.zoomLevel',4);
component.set('v.mapCenter', {
location: {
Country:'India'
}
});
component.set('v.markersTitle', 'accounts locations');
component.set('v.showFooter', true);
}else{
console.log('Something went wrong! ');
}
});
$A.enqueueAction(action);
}
})
- Now, create an Apex controller for the Lightning Component. Apex Controller named ShowAddressDetails.
public with sharing class ShowAddressDetails {
@AuraEnabled
public static list<accountAddressWrapper> getLocation(){
list<accountAddressWrapper> accWrapList = new list<accountAddressWrapper>();
list<account> accList = new list<account>();
//accList = [select name, BillingCountry, billingCity, BillingState, Billingpostalcode, BillingStreet
// from account where billingCountry!=null AND billingcity!=null];
for(account acc : [select name, BillingCountry, billingCity, BillingState, Billingpostalcode, BillingStreet
from account where billingCountry!=null AND billingcity!=null])
{
mapLocationWrapper mapList = new mapLocationWrapper();
mapList.Street = acc.BillingStreet;
mapList.PostalCode = acc.Billingpostalcode;
mapList.City = acc.billingCity;
mapList.State = acc.billingState;
maplist.country = acc.billingCountry;
accountAddressWrapper accWrap = new accountAddressWrapper();
accWrap.icon = 'utility:location';
accWrap.location = maplist;
accWrap.title = acc.Name;
accWrapList.add(accWrap);
}
return accWrapList;
}
public class accountAddressWrapper{
@AuraEnabled public string icon{get;set;}
@AuraEnabled public string title{get;set;}
@AuraEnabled public mapLocationWrapper location{get;set;}
}
public class mapLocationWrapper{
@AuraEnabled
public string Street{get;set;}
@AuraEnabled
public string PostalCode{get;set;}
@AuraEnabled
public string City{get;set;}
@AuraEnabled
public string State{get;set;}
@AuraEnabled
public string Country{get;set;}
}
}
Check out another amazing blog by Shweta here: Bar Charts in Salesforce | Visualforce Developer Guide
Output:
Reference: rajvakati
Responses