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