You need to sign in to do that
Don't have an account?
Yogesh Malbhage 18
Display Accounts on Google Map in lightning component and more..
We are having a requirement to show Accounts on a google map using a lightning component. Then we need to provide some actions like send email, add to campaign on right click of an Account from map. Can you please tell me what all actions we can perform from map?
Also, We need to display Hotels nearby accounts location on Map and the functionality to add those hotels in SF as an Account on click of a button. Can you please suggest me how we caan achieve this functionality ASAP?
Also, We need to display Hotels nearby accounts location on Map and the functionality to add those hotels in SF as an Account on click of a button. Can you please suggest me how we caan achieve this functionality ASAP?
As per your requirement, Salesforce introduced the lightning: map component that will display the google maps on lightning experience. So, You can pass markers to the component to define the locations to map. A marker can be a coordinate pair of latitude and longitude, or a set of address elements: City, Country, PostalCode, State, and Street. You need to pass the locationmapMarkers property to display the map.
Here is an example to display Accounts on a google map:
-----Apex Controller---->>
public with sharing class lightningMapController {
@AuraEnabled
public static list<accountLocationWrapper> getLocation(){
list<accountLocationWrapper> lstALW = new list<accountLocationWrapper>();
/*Query accounts records with billing address information */
for(account acc : [Select Name,description, BillingCountry, BillingCity, BillingPostalCode, BillingStreet, BillingState
From Account
Where BillingCountry != null
And BillingCity != null
limit 10]){
// first create "locationDetailWrapper" instance and set appropriate values
locationDetailWrapper oLocationWrap = new locationDetailWrapper();
oLocationWrap.Street = acc.BillingStreet;
oLocationWrap.PostalCode = acc.BillingPostalCode;
oLocationWrap.City = acc.BillingCity;
oLocationWrap.State = acc.BillingState;
oLocationWrap.Country = acc.BillingCountry;
// create "accountLocationWrapper" instance, set values and add to final list.
accountLocationWrapper oWrapper = new accountLocationWrapper();
oWrapper.icon = 'utility:location'; // https://www.lightningdesignsystem.com/icons/#utility
oWrapper.title = acc.Name;
oWrapper.description = acc.description;
oWrapper.location = oLocationWrap;
lstALW.add(oWrapper);
}
// retrun the "accountLocationWrapper" list
return lstALW;
}
/* wrapper class to store required properties for "lightning:map" component' */
public class accountLocationWrapper{
@AuraEnabled public string icon{get;set;}
@AuraEnabled public string title{get;set;}
@AuraEnabled public string description{get;set;}
@AuraEnabled public locationDetailWrapper location{get;set;}
}
/* sub wrapper class to store location details for "accountLocationWrapper" location property.*/
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;}
}
}
-----Lightning Component----->>
<aura:component controller="lightningMapController">
<!-- aura attributes to store Map component information -->
<aura:attribute name="mapMarkersData" type="Object"/>
<aura:attribute name="mapCenter" type="Object"/>
<aura:attribute name="zoomLevel" type="Integer" default="4" />
<aura:attribute name="markersTitle" type="String" />
<aura:attribute name="showFooter" type="Boolean" default="true"/>
<!-- init handler which will call 'doInit' fucntion on component load-->
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<!-- render map component only when we have at least 1 record in list.(mapMarkersData) -->
<aura:if isTrue="{!v.mapMarkersData.length > 0}" >
<!-- the map component -->
<lightning:map mapMarkers="{! v.mapMarkersData }"
center="{! v.mapCenter }"
zoomLevel="{! v.zoomLevel }"
markersTitle="{! v.markersTitle }"
showFooter="{ !v.showFooter }" />
</aura:if>
</aura:component>
------JavaScript Controller----->>
({
doInit: function (component, event, helper) {
// call getLocation apex class method
var action = component.get("c.getLocation");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
// set mapMarkersData attribute values with 'accountLocationWrapper' data
component.set('v.mapMarkersData',response.getReturnValue());
// set the mapCenter location.
component.set('v.mapCenter', {
location: {
Country: 'United States'
}
});
// set map markers title
component.set('v.markersTitle', 'Google Office locations.');
}
else if (state === "INCOMPLETE") {
// do something
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
}
})
----Lightning Application--->>
<aura:application extends="force:slds">
<c:lightningMap/>
<!-- here c: is org. default namespace prefix-->
</aura:application>
For more information you can follow below link:
http://sfdcmonkey.com/2018/09/16/mark-locations-google-map-salesforce-lightning/
https://rajvakati.com/2018/09/26/creating-google-maps-with-lightningmap-component/
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks.
Deepali Kulshrestha