Lightning:Map show data on Google Map

Posted on by Tushar Sharma

Winter 19 is rolling for everyone. I have shared some points which I like most in winter 19. Which you can read here.  with winter 19 Salesforce introduce many components, one of them is lightning:map. It is very useful for developers. Previously when you want to show address on google map you need google api key and lots of script to make it happen. With Lightning:map component you don’t need to worry about anything as it provide this functionality out of box. Also we can use this component in standalone app, lightning app, Lightning out and visualforce so we can use it in classic view as well.

Today we will use this component to show child contact address on google map as marker.

Lightning map show Contact on Parent account

To show this we simply use lightning:map tag and will provide data.


public class ChildContactMapController {
@AuraEnabled
public static List<Address> contactAddressMap(String recordId) {
List<Address> adressList = new List<Address>();
List<Contact> conList = [SELECT ID, Name, MailingStreet, MailingCity, MailingState, MailingCountry, MailingPostalCode from Contact
WHERE AccountID =: recordId];
for(Contact con : conList) {
location location = new location(con.MailingStreet, con.MailingCity,con.MailingState,con.MailingCountry,con.MailingPostalCode);
adressList.add(new Address(location, con.Name));
}
return adressList;
}
public class Address {
@AuraEnabled
public location location;
@AuraEnabled
public string icon;
@AuraEnabled
public string title;
@AuraEnabled
public string description;
public address(location locTemp, string titleTemp) {
location = locTemp;
title = titleTemp;
icon = 'standard:contact';
}
}
public class location {
@AuraEnabled
public string Street;
@AuraEnabled
public string City;
@AuraEnabled
public string PostalCode;
@AuraEnabled
public string State;
@AuraEnabled
public string Country;
public location(string StreetTemp, string CityTemp, string StateTemp, string CountryTemp, string PostalCodeTemp) {
Street = StreetTemp;
City = CityTemp;
PostalCode = PostalCodeTemp;
State = StateTemp;
Country = CountryTemp;
}
}
}

view raw

ChildContactMapController.apxc

hosted with ❤ by GitHub


<aura:component controller="ChildContactMapController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
<!– attributes –>
<aura:attribute name="mapMarkers" type="Object"/>
<aura:attribute name="center" type="Object" />
<aura:attribute name="zoomLevel" type="Integer" />
<aura:attribute name="markersTitle" type="String" />
<aura:attribute name="showFooter" type="Boolean" />
<!– handlers–>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<aura:if isTrue="{!v.mapMarkers.length > 0}" >
<lightning:map
mapMarkers="{! v.mapMarkers }"
center="{! v.center }"
zoomLevel="{! v.zoomLevel }"
markersTitle="{! v.markersTitle }"
showFooter="{ !v.showFooter }" >
</lightning:map>
</aura:if>
</aura:component>

view raw

LightningMap.cmp

hosted with ❤ by GitHub


({
init: function (cmp, event, helper) {
var action = cmp.get('c.contactAddressMap');
var recordId = cmp.get('v.recordId');
action.setParams({recordId: recordId});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === 'SUCCESS') {
cmp.set('v.mapMarkers',response.getReturnValue() );
cmp.set('v.center', {
location: {
City: 'Denver'
}
});
cmp.set('v.zoomLevel', 4);
cmp.set('v.markersTitle', 'Contact Locations Marker');
cmp.set('v.showFooter', true);
}
});
$A.enqueueAction(action);
}
})

view raw

LightningMapController.Js

hosted with ❤ by GitHub

Here we have created two wrapper to send data to map component.  Location wrapper is used to store the address while Address wrapper is used to provide marker specific details.

Do you like the component or want to add anything. Let me know in comments section. Happy Programming 🙂

    • 4 thoughts on “Lightning:Map show data on Google Map”

      1. Hi David, I am able to reproduce the issue but unable to find fix. We need to handle them in apex using some third party address validation api. If I found anything else will update here.

        Reply

        1. Hi Tushar,
          I’ve found that adding the geolocation info overides the address.
          Hard coded works:
          location: {
          Street:’74767 Dexter Road’,
          City: ‘Asbest’,
          PostalCode: ‘11407’,
          Country: ‘United States’,
          Latitude:40.691300,
          Longitude: -73.806100
          },
          but I can’t get it safely back from the remote call. It doesn’t recognise it.
          I’ve tried double, decimal and string but nothing has worked.

          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;}
          @AuraEnabled public double Latitude{get;set;}
          @AuraEnabled public double Longitude{get;set;}
          }

          oLocationWrap.Latitude = acc.BillingLatitude;
          oLocationWrap.Longitude = acc.BillingLongitude;

          Reply

    Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    %d bloggers like this: