Call us: +1 914 933 7633

Google Maps : Lightning Map Component for Custom Object Location

Google Maps : Lightning Map Component for Custom Object Location
August 13, 2020 Athira Ramadas

Google Maps : Lightning Map Component for Custom Object Location

Salesforce introduced lightning:map component in winter 19 release. This will display the Google maps on lightning experience. Before this feature, we used Visual Force Page for this.

The lightning: map component helps to display a map with one or more locations using Google Maps.

 


<lightning:map

    mapMarkers="{!v.mapMarkers}">

</lightning:map>

In the lightning map component we use markers function to define locations of maps. A marker could either be a coordinate pair of latitude and longitude or a set of whole address elements like City, Street, Postal Code, State, and Country.

We pass this as locationmapmarkers property where mapmarkers is an array of location indication markers. A marker contains 2 elements: a part that mentions the location information and a part that mentions the descriptive information.

1) Location Information Part: Contains Latitude and Longitude Or Address Element Part.

2) Descriptive Information Part: Not specifically related to location. This is about marker relevant information like title, description, icon and so on.

I have a custom object name Projects and it has address fields as City, Street, State, Country, and Postal Code. My aim is to display the map in the record page of the project along with the address. For this, I will have to fetch the project record id.

So the first step is to create a new project in SFDC (this is different from Project custom object) and a new LWC component in it.

Now we have to add a marker in Html. We need current Project record Id too.

The code is as below:


GoogleMap.Html

<template>

<lightning-record-view-form record-id={recordId} object-api-name="Project__c">

</lightning-record-view-form>

<template if:true={mapMarkers}>

<lightning-map map-markers={mapMarkers}  zoom-level="15″  title="Project Location"></lightning-map>

</template>

</template>

——————————————————————————-

<lightning-record-view-form record-id={recordId} object-api-name="Project__c">  will get all the details of the current record with its Id.

googleMap.js

import { LightningElement, wire, api, track } from ‘lwc’;

import getRecord  from  ‘@salesforce/apex/GoogleMapController.getRecord’;

export default class Poc extends LightningElement {

@api recordId;

@track mapMarkers;

@wire(getRecord,{recrId:’$recordId’})

wiregetRecord({data, error}){

if (data) {

this.mapMarkers = data;

console.log(‘Success’+data);

console.log(JSON.stringify(data, null, ‘\t’));

} else if (error) {

console.error(error);

}

}

}

The Id fetched from html page we pass to a value @api recordId;

This @api is a decorator to get a public property, in simple words it gets the value to js controller from html.

Here we are using a custom controller class name GoogleMapController to get corresponding record Id and fetching its address details and passing it back to the js controller.

We are passing the fetched Id to the custom controller by using:

@wire(getRecord,{recrId:’$recordId’})

where @wire is a reactive fire service used to read data to the controller or it passes the js value to the controller where recrId is the parameter of the method present in the custom controller, GoogleMapController.

Here the custom controller is given below.


GoogleMapController.cls

public with sharing class GoogleMapController {

@AuraEnabled(cacheable=True)

public static List<Location> getRecord(Id recrId){

System.debug(‘recrID’+recrId);

List<Project__c>  accs = [Select Name, Country__c, City__c, Zip_Postal_Code__c, Street__c, State_Province__c

From Project__c

Where Country__c != null

And City__c != null AND ID = :recrId];

 

System.debug(‘acc’+accs);

List<Location> loc = new List<Location>();

for(Project__c acc :accs){

System.debug(acc);

GeoLocation geoInfo = new GeoLocation();

geoInfo.Street = acc.Street__c;

geoInfo.PostalCode = acc.Zip_Postal_Code__c;

geoInfo.City = acc.City__c;

geoInfo.State = acc.State_Province__c;

geoInfo.Country = acc.Country__c;

Location locDetail = new Location();

locDetail.icon = ‘action:map’;

locDetail.title = ‘Project Locations’;

locDetail.description = acc.Name;

locDetail.location = geoInfo;

loc.add(locDetail);

}

return loc ;

}

public class Location{

@AuraEnabled

public String icon{get;set;}

@AuraEnabled

public String title{get;set;}

@AuraEnabled

public String description{get;set;}

@AuraEnabled

public GeoLocation location{get;set;}

}

public class GeoLocation{

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

}

}

Also, we have to check if the mexa.xml file active or not. Also as we need to show map in record page, the target should be given as follows:


<target>lightning__RecordPage</target>

<?xml version="1.0″ encoding="UTF-8″?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>48.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__RecordPage</target>

</targets>

</LightningComponentBundle>

Finally after deploying this to your Organization we will be able to see the map as displayed below.

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*