How to Create a Salesforce Lightning Map Component?

We have all tried to integrate different map APIs in salesforce, most popular being Google Map API. Although we have done a spectacular job while using it, how about using inbuilt functionality that Salesforce provides us with. Let us proceed with Lightning Map Component and how we can put it to our use.

Lightning Map Component Attributes

We shall begin with the attributes used in lightning:map component, which are listed below:

• class – It is a CSS class for the outer element, in addition to the component’s base classes.
• title – It displays us tooltip text on mouse hovers the element.
• zoomLevel – It denotes the zoom levels corresponding with Google Maps API. If it is not specified, the map component automatically defines it according to the screen.
• mapMarkers(Required) – It defines an array of objects with address/coordinates to be displayed on the map.
• markersTitle – It provides the heading title for the markers when the map has multiple markers. The title is displayed as a header for the list of clickable addresses.
• center – It defines the center location for a map, if not defined it is automatically adjusted.
• showFooter – A link is displayed ‘Open in Google Maps’ in the footer which can open a window externally with the markers in the map.
• listView – It displays or hides the list of locations.

Also Read: How to Create and Use Salesforce Surveys

Let’s understand with given below example

Here is what we are trying to as example, we will display the location of Account through the defined billing address. So here is the code:

Apex Controller:

public with sharing class AccountMapController {
@AuraEnabled
public static Account getAccountLocation(string accountId){
return [Select Id,Name,Website,BillingStreet,BillingCity,BillingState from Account where Id =: accountId];
}
}


Lightning Component:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"
access="global" controller="AccountMapController"/>
<!-- attributes -->
<aura:attribute name="accountLocation" type="Object"/>
<aura:attribute name="zoom" type="Integer" />
<aura:attribute name="recordId" type="String" />

<!– handlers–>
<aura:handler name=”init” value=”{! this }” action=”{!c.initialize }”/>

<!– the map component –>
<aura:if isTrue=”{!v.accountLocation.length > 0}” >
<lightning:map mapMarkers=”{! v.accountLocation }” zoomLevel=”{!v.zoomLevel}” />
</aura:if>
</aura:component>

Learn More: Benefits of Salesforce Commerce Cloud Implementation

Lightning Component Controller:


({
initialize : function(component, event, helper) {
var recordId = component.get('v.recordId');
var action = component.get('c.getAccountLocation');
action.setParams({
'accountId' : recordId
});
action.setCallback(this,function(res){
var state = res.getState();
if(state==='SUCCESS'){
console.log(res.getReturnValue());
var acc = res.getReturnValue();
component.set('v.accountLocation', [
{
location: {
Street: acc.BillingStreet,
City: acc.BillingCity,
State: acc.BillingState
},
title: acc.Name,
description: acc.Website
}
]);
component.set('v.zoom', 16);
}
});
$A.enqueueAction(action);
}
})


Output

We at Emizentech are adept at providing salesforce development services for various salesforce products and modules. If you a have a project related to it then get in touch with us as we are a reputed and experienced Salesforce consulting company.

Also Read: Magento Commerce Cloud Vs Salesforce Commerce Cloud