AccountsOnMap:
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="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> |
AccountOnMapController:
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
| ({ | |
| 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:
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
| ({ | |
| 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); | |
| } | |
| }) |
AccountsOnMapCSS:
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
| .THIS #container{ | |
| border: 1px solid rgb(221, 219, 218); | |
| } |
Apex Class:
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 LightningMapCntrl { | |
| @AuraEnabled | |
| public static List<Account> fetchAllAccounts(){ | |
| List<Account> accList = [Select Id,Name,Website,BillingCity,BillingStreet,BillingPostalCode,BillingState,BillingCountry from Account ]; | |
| return accList; | |
| } | |
| } |
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
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
Hi Arun Kumar, Thanks for the details. How to plot the data as per the list view records. Please revert.