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.
To show this we simply use lightning:map tag and will provide data.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| 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); | |
| } | |
| }) |
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 🙂
Hi Tushar,
Great post.
Do you know of a way to trap bad addresses?
Otherwise, the map fails.
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.
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;
Decimal is working fine for me. “but I can’t get it safely back from the remote call. It doesn’t recognise it” I’m not clear on this line.
Hello Tushar,
I am using your code which you have shared so, one thing coming in my mind can you use different section and also can you use the link in the section?