Mark Locations On Google Map With Salesforce Lightning Component

Mark Locations On Google Map With Salesforce Lightning Component

Lightning Component

salesforce winter 19Salesforce winter 19 release has come with many awesome features. lightning:map base component is part of this release.  which will securely displays a map of one or more locations in salesforce lightning component . This component requires API version 44.0 and later.

Mark Locations On Google Map With Salesforce Lightning Component

Today in this post we are going to learn how we can display or mark locations on “lightning:map” (Google Map) base component dynamically, using sObject records data.

in this post i have created few records in account object with billing address to mark it on the lightning map.

Step 1 : Apex Controller [lightningMapController.apxc]

Support API : 44.00
Author : Piyush Soni
Source :
public with sharing class lightningMapController {
    public static list<accountLocationWrapper> getLocation(){
        list<accountLocationWrapper> lstALW = new list<accountLocationWrapper>();
        /*Query accounts records with billing address information */  
        for(account acc : [Select Name,description, BillingCountry, BillingCity, BillingPostalCode, BillingStreet, BillingState
                           From Account
                           Where BillingCountry != null
                           And BillingCity != null
                           limit 10]){
                               // first create "locationDetailWrapper" instance and set appropriate values
                               locationDetailWrapper oLocationWrap = new locationDetailWrapper();
                               oLocationWrap.Street = acc.BillingStreet;
                               oLocationWrap.PostalCode = acc.BillingPostalCode;
                               oLocationWrap.City = acc.BillingCity;
                               oLocationWrap.State = acc.BillingState;
                               oLocationWrap.Country = acc.BillingCountry;
                               // create "accountLocationWrapper" instance, set values and add to final list. 
                               accountLocationWrapper oWrapper = new accountLocationWrapper();
                               oWrapper.icon = 'utility:location'; //
                               oWrapper.title = acc.Name;
                               oWrapper.description = acc.description;
                               oWrapper.location = oLocationWrap;
        // 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 [lightningMap.cmp]

From developer console >> file >> new >> Lightning Component

Support API : 44.00
Author : Piyush Soni
Source :
<aura:component controller="lightningMapController">
    <!-- 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 }" />

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.
  • for more details check here.
How To Fetch Multi Picklist Values From sObject To lightning:dualListbox Component

JavaScript Controller : [lightningMapController.js]

    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 
                // 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: " + 
                    } else {
                        console.log("Unknown error");

Lightning Application – From developer console >> file >> new >> Lightning Application

<aura:application extends="force:slds">
<!-- here c: is org. default namespace prefix-->

Output :

Mark Locations On Google Map With Salesforce Lightning Component

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

 Let us know if it helps you 🙂

people also check : How to Use Custom Font In Lightning Component Using Static Resource



  • Hi Piyush ,

    i m getting like this error… how to solve this prbm…
    Failed to save Mappltng.cmp: No COMPONENT named markup://lightning:map found : [markup://c:Mappltng]: Source

  • Hi ,

    Iam not able to see the makers on Google Map.. On to my right side can see account name with addresses . Iam trying this in my personal Org and Version is 44.00. Please do needful

      • Hi Piyush,
        You are a genius! Great post. Help me immensely.
        I was struggling making the JSON but this is wonderful.
        Now, as Anand mentioned, if any address is incorrect, the whole map fails.
        Do you know how to check/validate addresses before they get to the map?

        I was hoping that the BillingLatitude and BillingLongitude would help but they can have values even if the address is rubbish.
        So that didn’t solve the problem but here’s the code should anyone wish to use it.

        I added to the locationDetailWrapper class:
        @AuraEnabled public decimal Latitude{get;set;}
        @AuraEnabled public decimal Longitude{get;set;}

        I added BillingLatitude, BillingLongitude to the select query;

        then assigned the query result to the object:
        oLocationWrap.Latitude = acc.BillingLatitude;
        oLocationWrap.Longitude = acc.BillingLongitude;

        Here’s a bad location should you want to try one:
        location: {
        Street:’74767 Dexter Road’,
        City: ‘Asbest’,
        PostalCode: ‘11407’,
        Country: ‘United States’

        icon: ‘utility:location’,
        title: ‘Bad Address’

  • Hi Piyush ,

    Awesome Post…! helped a lot…

    Now i want to implement hover functionality in google Map with Salesforce data and also want to display custom view after location click.Please suggest me a solution.

  • I want to do this in my org. I copied the code but where can I make the adjustment so it is pointing my my company data instead of the dummy data that was created?

  • Great post – is there a way to  remove the side bar listing all of the pins and their locations so that just the map is on the screen?

  • Really great post. I’ve successfully implemented this but need some test classes to deploy to production. Do you have any sample test code to match the code you’ve given here? Thanks!

  • we want to inactivate google map for China location but don’t want to inactivate for the whole Org. Is there a solution for implementing this requirement

  • I was able to create Google Map using VisualForce page and it looks exactly what all customer’s want.
    We do not require Google API is.
    Let me know if anyone wants to implement the solution.
    Email: [email protected]


Leave a Reply