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: CityCountryPostalCodeState, and Street. Note that to support reliable geocoding of addresses, if Street is specified then at least one of CityCountryPostalCode 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