Google Maps with lightning:map component
with salesforce winter 19 release, Salesforce introduced the lightning:map component that will display the google maps on lightning experience. Prior to winter 19 release, we used to do a hack to show the google maps on the lightning experience by using visualforce page. The lightning:map component securely displays a map of one or more locations using Google Maps.
You can pass markers to the component to define the locations to map. A marker can be a coordinate pair of latitude and longitude, or a set of address elements: City, Country, PostalCode, State, and Street. You need to pass the locationmapMarkers property to display the map.
For example:
|
1 2 3 |
<lightning:map mapMarkers="{!v.mapMarkers}"> </lightning:map> |
map-markers 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, description and an icon which is information relevant to the marker but not specifically related to location.
The location information supports the following address elements: City, Country, PostalCode, State, and Street. Note that to support reliable geocoding of addresses, if Street is specified then at least one of City, Country, PostalCode or State must be specified.
Here’s an example of a marker that uses address elements.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[{ location: { 'City': 'San Francisco', 'Country': 'USA', 'PostalCode': '94105', 'State': 'CA', 'Street': 'The Landmark @ One Market, Suite 300' }, title: 'The Landmark Building', description: 'The Landmark is considered to be one of the city's most architecturally distinct and historic properties', icon: 'standard:account' }] |
Apex Class :
the below apex class will get the billing address information from the account will display on the maps
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
public class AccountLocation { @AuraEnabled public static List<Location> getAccount() { List< Account> accs = [Select Id, Name,Type, Industry, BillingAddress,BillingStreet, BillingCity, BillingCountry, BillingPostalCode, BillingState,Phone from Account where BillingStreet!=NULL AND BillingCity!=NULL AND BillingCountry!=NULL AND BillingPostalCode!=NULL AND BillingState!=NULL] ; List<Location> loc = new List<Location>(); for(Account acc :accs){ GeoLocation geoInfo = new GeoLocation(); geoInfo.Street = acc.BillingStreet; geoInfo.PostalCode = acc.BillingPostalCode; geoInfo.City = acc.BillingCity; geoInfo.State = acc.BillingState; geoInfo.Country = acc.BillingCountry; Location locDetail = new Location(); locDetail.icon = 'action:map'; locDetail.title = acc.Name; locDetail.description = acc.Name; locDetail.location = geoInfo; loc.add(locDetail); } return loc ; } public class Location{ @AuraEnabled public String icon{get;set;} @AuraEnabled public String title{get;set;} @AuraEnabled public String description{get;set;} @AuraEnabled public GeoLocation location{get;set;} } public class GeoLocation{ @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;} } } |
Here is the component
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="AccountLocation" > <!-- attributes --> <aura:attribute name="mapMarkers" type="Object" /> <aura:attribute name="center" type="Object" /> <aura:attribute name="zoomLevel" type="Integer" default="7" /> <aura:attribute name="markersTitle" type="String" default="Google Maps"/> <aura:attribute name="showFooter" type="Boolean" default="true" /> <aura:attribute name="title" type="String" default="Google Maps"/> <!-- handlers--> <aura:handler name="init" value="{! this }" action="{! c.init }"/> <!-- the map component --> <aura:if isTrue="{!v.mapMarkers.length > 0}" > <lightning:map mapMarkers="{!v.mapMarkers}" center="{! v.center }" zoomLevel="{! v.zoomLevel }" markersTitle="{! v.markersTitle }" showFooter="{ !v.showFooter }" > </lightning:map> </aura:if> </aura:component> |
javascript controller
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
({ init: function (component, event, helper) { var action = component.get("c.getAccount"); action.setCallback(this, function(response) { console.log('response'+response); var state = response.getState(); console.log(state); if (state == "SUCCESS") { var obj =response.getReturnValue() ; console.log(obj); component.set('v.center', { location: { City: 'Denver' } }); component.set('v.mapMarkers',obj); component.set('v.zoomLevel', 4); component.set('v.markersTitle', 'Salesforce locations'); component.set('v.showFooter', true); } }); $A.enqueueAction(action); } }) |
After creating the component you can able to the see the map with markers as shown below
