Locate Accounts Address On Google Map

AccountsOnMap:

<aura:component controller="LightningMapCntrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<!-- aura attributes -->
<aura:attribute name="mapMarkers" type="Object"/>
<aura:attribute name="centerObj" type="Object" />
<aura:attribute name="zoomLevel" type="Integer" />
<aura:attribute name="markersTitle" type="String" />
<aura:attribute name="showFooter" type="Boolean" />
<aura:attribute name="recordId" type="string"/>
<aura:attribute name="accObj" type="Account[]"/>
<!-- Init handlers-->
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<div class="slds">
<div id="container">
<div class="slds-page-header">
ACCOUNTS ON MAP.
</div>
<!-- the map component -->
<aura:if isTrue="{!v.mapMarkers.length > 0}" >
<lightning:map
mapMarkers="{! v.mapMarkers }"
center="{! v.centerObj }"
zoomLevel="{! v.zoomLevel }"
markersTitle="{! v.markersTitle }"
showFooter="{ !v.showFooter }"
listView="auto">
</lightning:map>
</aura:if>
</div>
</div>
</aura:component>
view raw AccountsOnMap hosted with ❤ by GitHub

AccountOnMapController:

({
doInit : function(component, event, helper) {
let action = component.get("c.fetchAllAccounts");
action.setCallback(this,function(response){
let state = response.getState();
if(state =='SUCCESS'){
let result = response.getReturnValue();
console.log('Result returned: ' +JSON.stringify(result));
component.set("v.accObj",result);
var accounts = component.get("v.accObj");
helper.loadMap(component,event,helper,accounts);
}else{
console.log('Something went wrong! ');
}
});
$A.enqueueAction(action);
}
})

AccountOnMapHelper:

({
loadMap : function(component,event,helper,account) {
var mapsArray = [];
for(let index=0; index < account.length; index++){
var Mobj = {
location: {
Street: account[index].BillingStreet,
City: account[index].BillingCity,
PostalCode: account[index].BillingPostalCode,
State: account[index].BillingState,
Country: account[index].BillingCountry
},
icon: 'standard:account',
title: account[index].Name,
description: account[index].Website
}
mapsArray.push(Mobj);
}
component.set('v.mapMarkers', mapsArray);
component.set('v.centerObj', {
location: {
City: 'Noida'
}
});
component.set('v.zoomLevel', 12);
component.set('v.markersTitle', 'Accounts locations');
component.set('v.showFooter', true);
}
})
view raw AccountOnMapHelper hosted with ❤ by GitHub

AccountsOnMapCSS:

.THIS #container{
border: 1px solid rgb(221, 219, 218);
}
view raw AccountsOnMapCSS hosted with ❤ by GitHub

Apex Class:

public class LightningMapCntrl {
@AuraEnabled
public static List<Account> fetchAllAccounts(){
List<Account> accList = [Select Id,Name,Website,BillingCity,BillingStreet,BillingPostalCode,BillingState,BillingCountry from Account ];
return accList;
}
}
view raw LightningMapCntrl hosted with ❤ by GitHub

Create a lightning component tab and use this component in the tab.

Follow this link : https://sfdclesson.com/2019/07/07/lightningmap-show-contacts-location-on-google-map/ for more details.

Thanks

Arun Kumar

One comment

  1. Hey Arun Kumar thanks for sharing the lightning component.
    How can I build the functionality which will find me the nearest 10 accounts or 10 opportunity. How can I leverage this functionality.
    Thanks

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s