Lightning Web Component Google Maps
Let us discuss here how to use the Google maps with Lightning Web Component Map. A lightning-map component displays a map of one or more locations. To display maps Pass the location to be displayed via the component’s map-markers property. map-markers is an array of markers that indicate location. A marker contains
- Location Information: This can be a coordinate pair of latitude and longitude or an address composed of address elements.
- Descriptive Information: This is information like title, description and an icon which is information relevant to the marker but not specifically related to location.
The location information supports the following address elements: City, Country, PostalCode, State, and Street. Note that to support reliable geocoding of addresses, if Street is specified then at least one of City, Country, PostalCode or State must be specified. Here’s an example of a marker that uses address elements.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[{ location: { 'City': 'San Francisco', 'Country': 'USA', 'PostalCode': '94105', 'State': 'CA', 'Street': 'The Landmark @ One Market, Suite 300' }, title: 'The Landmark Building', description: 'The Landmark is considered to be one of the city's most architecturally distinct and historic properties', icon: 'standard:account' }] |
Here’s an example of a marker that uses coordinates for latitude and longitude.
|
1 2 3 4 5 6 |
{ location: { 'Latitude': '37.790197', 'Longitude': '-122.396879' } } |
For each map marker in the array of map markers, provide either latitude and longitude coordinates or address elements. If you specify both in a single marker, latitude and longitude get precedence.
When displaying a list of addresses, you must also pass the markers-title property, which displays a heading for your locations.
1.Create an Apex Class
The following apex class will get the account location information and pass it to the web components. Use the following SFDX command.
|
1 |
sfdx force:apex:class:create -n AccountLocation -d force-app/main/default/apex |
Here is the code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
public class AccountLocation { @AuraEnabled(cacheable=true) public static List<Location> getAccount() { List< Account> accs = [Select Id, Name,Type, Industry, BillingAddress,BillingStreet, BillingCity, BillingCountry, BillingPostalCode, BillingState,Phone from Account where BillingStreet!=NULL AND BillingCity!=NULL AND BillingCountry!=NULL AND BillingPostalCode!=NULL AND BillingState!=NULL] ; List<Location> loc = new List<Location>(); for(Account acc :accs){ System.debug(acc); GeoLocation geoInfo = new GeoLocation(); geoInfo.Street = acc.BillingStreet; geoInfo.PostalCode = acc.BillingPostalCode; geoInfo.City = acc.BillingCity; geoInfo.State = acc.BillingState; geoInfo.Country = acc.BillingCountry; Location locDetail = new Location(); locDetail.icon = 'action:map'; locDetail.title = acc.Name; 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;} } } |
2. Create a Lightning Web component
Create a lightning web component to display the map. use this SFDX command to create a web component.
|
1 |
sfdx force:lightning:component:create --type lwc -n MapEx -d force-app/main/default/lwc |
Here is the MapEx.html code
|
1 2 3 4 5 6 7 |
<template> <h6> Google Maps Example </h6> <template if:true={accounts}> <lightning-map map-markers={accounts} markers-title={accounts}> </lightning-map> </template> </template> |
Here is the MapEx.js JavaScript controller code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { LightningElement ,api,wire,track} from 'lwc'; import getAccount from '@salesforce/apex/AccountLocation.getAccount'; export default class MapEx extends LightningElement { @track accounts; @track error; @track showFooter = true ; @wire(getAccount) wiredAccountss({error,data}) { if (data) { this.accounts = data; console.log(data); console.log(JSON.stringify(data, null, '\t')); } else if (error) { console.log(error); this.error = error; } } } |
Here is the MapEx.js-meta.xml configuration file
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>false</isExposed> <targets> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle> |
3.Push Changes to scratch org
Now push the changes to scratch org using this below command.
|
1 |
sfdx force:source:push |
Add this web component to the record page and you can able to see the map as shown below.
