Friday, January 18, 2019

Lightning:map - Way to display location on map either by using address or geo-location

Salesforce introduces new tag in lightning framework "lightning:map" which can be used to securely displays map of one location or many locations.

You can either use address (make sure postalcode,country are specified) or geolocation (latitude and longitude).

Below is syntax to use lightning:map

<lightning:map
    mapMarkers="{!v.mapMarkers}">
</lightning:map>

where mapMarkers is an array of marker to display location. Below is JSON sample for markers:

[{
"location": {
"Country": "USA",
"State": "CA"
},
"icon": "standard:account",
"title": "Western Telecommunications Corp.",
"description": "CA,USA"
},
{
"location": {
"City": "Lawrence",
"Country": "USA",
"PostalCode": "66045",
"State": "KS"
},
"icon": "standard:account",
"title": "Dickenson plc",
"description": "Lawrence,KS,66045,USA"
}]

If you know geo-location of address then, you can pass latitude and longitude in location as shown below:

[{
    location: {
'Latitude': '37.790197',
'Longitude': '-122.396879'
},
    title: 'Western Telecommunications Corp',
    description: 'Western Telecommunications Corp',
    icon: 'standard:account'
}]


I have created a sample lightning component which fetch account billing address and display it on google maps using Lightning:map tag.


Complete Code:


Note:
  • If you specify address, then you must specify City, PostalCode, State or Country.
  • If you specify both address and geo-location, then map will be plotted using latitude and longitude.
  • If any mapMarker is invalid, then nothing will be plotted on map even other map markers.

Hope this will help!!!

6 comments:

  1. Atocloud have designed solution to display all of its accounts on the google map for one of there clients in both lightning and classic, where user can select type of record he wants to search (Account, contact or any custom object). This solution has three section

    ReplyDelete
  2. Atocloud have designed solution to display all accounts on the google map in both lightning and classic, where user can select type of record he wants to search (Account, contact or any custom object).

    ReplyDelete
  3. Started out in 2012, Data Science Central is one of the industry’s leading and fastest growing Internet
    community for data practitioners. Whether it is data science or machine learning or deep learning or
    big data, Data Science Central is a one-stop shop that covers a wide range of data science topics that
    includes technology, tools, data visualisation, code, and job opportunities. Also, many industry experts
    contribute to the community forum for discussion or questions.

    DATA SCIENCE Training in OMR Chennai

    ReplyDelete