lightning:map

Caroline Poole February 21, 2020 Reply

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

Arun Kumar February 21, 2020 Reply

Hello Caroline,

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

shaankhokhar February 9, 2021 Reply

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?

Arun Kumar April 13, 2021 Reply

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.

Panda July 13, 2021 Reply

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;
	}
	}

lightning:map – Show Contacts Location On Google Map.