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]

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

TestApp.app

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 4,490 times, 1 visits today)

19 comments

  • 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?

Leave a Reply