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:
<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.
[{ 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
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
<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
({ 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