Guide to Lightning: Securely Display Maps
Lightning component securely displays a map of one or more locations. This component inherits styling from map in the Lightning Design System. Pass the location to be displayed via the component’s mapMarkers property.
Example –
<lightning:map
mapMarkers=”{!v.mapMarkers}”>
</lightning:map>
MapMarkers is an array of markers that indicate location. A marker contains –
Location Information: This can be a coordinate pair of latitude and longitude or an address composed of address elements.
Descriptive Information:This is information like title, location and an icon which is information relevant to the marker but not specifically related to location.
Example-
Here’s an example of a marker that uses address elements.
[{
location: {
'City': 'San Francisco',
'Country': 'USA',
'PostalCode': '94105',
'State': 'CA',
'Street': 'The Landmark @ One Market, Suite 300'
},
title: 'The Landmark Building',
icon: 'standard:account'
}]
Displaying Multiple Addresses:
When displaying a list of addresses, you must pass in the markersTitle property, which displays a heading for your locations. Optional properties are discussed below.
<lightning:map mapMarkers=”{!v.mapMarkers}” markersTitle = “My favorite places for lunch”> </lightning:map>
When you specify multiple markers in an array, the lightning:map component renders a list of tiles with location titles and addresses next to the map with the required markersTitle displayed above the list. Each location tile contains an icon, a title, and an address.
To customize each location tile, you can specify the optional icon, title, and description properties for each address. The lightning:map component displays the icon next to the address.
mapMarkers = [
{
location: {
// Location Information
City: 'San Francisco',
Country: 'USA',
PostalCode: '94105',
State: 'CA',
Street: '50 Fremont St',
},
// Extra info for tile in sidebar %26 infoWindow
icon: 'standard:account',
title: 'Julies Kitchen', // e.g. Account.Name
description: 'This is a long description'
},
{
location: {
// Location Information
City: 'San Francisco',
Country: 'USA',
PostalCode: '94105',
State: 'CA',
Street: '30 Fremont St.',
},
// Extra info for tile in sidebar
icon: ‘standard:account’,
title: ‘Tender Greens’, // e.g. Account.Name
}
]
Additionally, consider the following:
If you specify an address, you must provide at least one of the following values: City, PostalCode, State or Country.
If you pass in both an address and latitude and longitude, the map plots the marker according to the latitude and longitude values.
If a marker in the mapMarkers array is invalid, no markers are plotted on the map.
Business Use Case:
On a custom object, on the basis of address fields show a Google map with markers, Icon, etc.
public with sharing class lightningMapController {
@AuraEnabled
public static list getLocation(){
list lstALW = new list();
/*Query accounts records with billing address information */
for(Candidate__c can : [Select Name,Street__c,City__c,State_Province__c,Zip_Postal_Code__c,Country__c
From Candidate__c
Where Country__c != null
And City__c != null]){
// first create "locationDetailWrapper" instance and set appropriate values
locationDetailWrapper oLocationWrap = new locationDetailWrapper();
oLocationWrap.Street = can.Street__c;
oLocationWrap.PostalCode = can.Zip_Postal_Code__c;
oLocationWrap.City = can.City__c;
oLocationWrap.State = can.State_Province__c;
oLocationWrap.Country = can.Country__c;
// create "accountLocationWrapper" instance, set values and add to final list.
accountLocationWrapper oWrapper = new accountLocationWrapper();
oWrapper.icon = 'utility:location'; // https://www.lightningdesignsystem.com/icons/#utility
oWrapper.title = can.Name;
oWrapper.location = oLocationWrap;
lstALW.add(oWrapper);
}
// retrun the "accountLocationWrapper" list
return lstALW;
}
/* wrapper class to store required properties for "lightning:map" component' */
public class accountLocationWrapper{
@AuraEnabled public string icon{get;set;}
@AuraEnabled public string title{get;set;}
@AuraEnabled public string description{get;set;}
@AuraEnabled public locationDetailWrapper location{get;set;}
}
/* sub wrapper class to store location details for "accountLocationWrapper" location property.*/
public class locationDetailWrapper{
@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;}
}
}
Step 2 :- Lightning Component
<aura:component controller="lightningMapController" implements="force:appHostable">
<!– aura attributes to store Map component information –>
<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”/>
<!-- init handler which will call 'doInit' fucntion on component load-->
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<!-- render map component only when we have at least 1 record in list.(mapMarkersData) -->
<aura:if isTrue=”{!v.mapMarkersData.length > 0}” >
<!– the map component –>
<lightning:map mapMarkers=”{! v.mapMarkersData }”
center=”{! v.mapCenter }”
zoomLevel=”{! v.zoomLevel }”
markersTitle=”{! v.markersTitle }”
showFooter=”{ !v.showFooter }” />
</aura:if>
</aura:component>
Step 3: Lightning Controller
({
doInit: function (component, event, helper) {
// call getLocation apex class method
var action = component.get("c.getLocation");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
// set mapMarkersData attribute values with 'accountLocationWrapper' data
component.set('v.mapMarkersData',response.getReturnValue());
// set the mapCenter location.
component.set('v.mapCenter', {
location: {
Country: 'United States'
}
});
// set map markers title
component.set('v.markersTitle', 'Google Office locations.');
}
else if (state === "INCOMPLETE") {
// do something
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
}
})
Step 4: Lightning Application
<aura:application extends=”force:slds”>
<c:LightningMapController/>
<!– here c: is org. default namespace prefix–>
</aura:application>
Step 5: The Last step is you have to create a domain in salesforce org.
Setup>Quick find Box>My Domain>Create Domain
Output:
Contact Us
We would love to hear from you Please feel free to send us a message via the form
