Mark Locations On Google Map With Salesforce 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]

Step 2 : Lightning Component [lightningMap.cmp]

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

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]

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

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


(Visited 13,286 times, 1 visits today)

31 thoughts on “Mark Locations On Google Map With Salesforce Lightning Component”

  1. 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

  2. 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’

        • Non static field cannot be referenced from a static context: latitude from the type System.Location

          Error occurred while using latitude and longitude, Please help

  3. 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.

  4. 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?

  5. 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?

  6. 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!

  7. 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

  8. Hi,

    i am working on a requirement where i wanted to show hotels for the city which user selected from the UI, i am trying to achieve this using salesforce lightning component and google api for google maps and places, however when i am trying to call the method present in the available JS (form the google api map example) i am getting an error in the browser console as “Cannot read property ‘getPlace’ of undefined”, which i understood as this method definition is not public hence my the logic which i wrote is not letting me call this method and hence this error is coming.

    i just wanted to check if there is any other workaround which i can opt to or if there is any other method which works exactly similar to getPlace() method, which can help me achieve the business scenario i am working on.

    below is the scenario:-

    User will select a City from the UI (salesforce Lightning component)–> based on the selection logic will pass the city to Google map API and fetch the hotels around the city below is the link i took help from :-

    looking forward a quick response on this.


  9. I cannot get more than 40 markers in map..what will be the reason ..?

    i am getting  40 map address in map but not for 40+


    please provide a solution for this

  10. First of all thanks Piyush for this post, while going through this I got strucked at one point.
    That is, when we have more number of records let say 15-20 then the map disappears/ shows at the middle fo the component.
    If we want to show more records in a table without scroling, then we go through the pagination.But, how can we achieve the same thing for map component.


Leave a Comment