lightning:map – Show Contacts Location On Google Map.

2020-02-21T01:45:50+05:30

How would I do this to show all accounts locations on a map? Instead just related contacts?

2020-02-21T23:45:11+05:30

Hello Caroline,

I have written another post to do this please check it out. Hope this will help you! 🙂

2020-02-21T23:43:00+05:30

2021-02-09T20:06:14+05:30

This is an excellent post!

I have only two questions, how would i create a search bar to search up locations on the map, and would it be possible to colour code the markers?

2021-04-13T21:50:23+05:30

Hello,

You can create the search bar but it will be custom. We don’t have anything standard in the map component to use the search bar.

2021-07-13T22:08:49+05:30

Is there a way to pull the address of the account that you are viewing and make it into a satellite map?

	<lightning:map mapMarkers="{! v.mapMarkers }"
	center="{! v.centerObj }"
	zoomLevel="{! v.zoomLevel }"
	markersTitle="{! v.markersTitle }"
	showFooter="{ !v.showFooter }" >
	</lightning:map>

	<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="conObj" type="Contact[]"/>
	<!-- Init handlers-->
	<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
	<div class="slds">
	<div id="container">
	<div class="slds-page-header">
	CONTACTS 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 }" >
	</lightning:map>
	</aura:if>
	</div>
	</div>
	</aura:component>

	({
	doInit : function(component, event, helper) {
	let action = component.get("c.fetchContacts");
	action.setParams({
	"accountId":component.get("v.recordId")
	});
	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.conObj",result);
	var contacts = component.get("v.conObj");
	helper.loadMap(component,event,helper,contacts);
	}else{
	console.log('Something went wrong! ');
	}
	});
	$A.enqueueAction(action);
	}
	})

	({
	loadMap : function(component,event,helper,contacts) {
	var mapsArray = [];
	for(let index=0; index < contacts.length; index++){

	var Mobj = {
	location: {
	Street: contacts[index].MailingStreet,
	City: contacts[index].MailingCity,
	PostalCode: contacts[index].MailingPostalCode,
	State: contacts[index].MailingState,
	Country: contacts[index].MailingCountry
	},
	icon: 'standard:contact',
	title: contacts[index].Name,
	description: contacts[index].Phone
	}
	mapsArray.push(Mobj);
	}
	component.set('v.mapMarkers', mapsArray);
	component.set('v.centerObj', {
	location: {
	City: 'Noida'
	}
	});
	component.set('v.zoomLevel', 12);
	component.set('v.markersTitle', 'Contacts locations');
	component.set('v.showFooter', true);
	}
	})

	public class LightningMapCntrl {

	@AuraEnabled
	public static List<Contact> fetchContacts(String accountId){
	List<Contact> conList = [Select Id,Name,Phone,MailingCity,MailingStreet,MailingPostalCode,MailingState,MailingCountry from Contact where accountId=:accountId];
	return conList;
	}
	}

6 comments