Mark Locations On Google Map With Salesforce Lightning Component

Salesforce winter 19 release has come with many awesome features. lightning:map base component is part of this release.  which will securely displays a map of one or more locations in salesforce lightning component . This component requires API version 44.0 and later.

Today in this post we are going to learn how we can display or mark locations on “lightning:map” (Google Map) base component dynamically, using sObject records data.

in this post i have created few records in account object with billing address to mark it on the lightning map.

Step 1 : Apex Controller [lightningMapController.apxc]

/*
Support API : 44.00
Author : Piyush Soni
Source : sfdcMonkey.com
*/
public with sharing class lightningMapController {
    @AuraEnabled
    public static list<accountLocationWrapper> getLocation(){
        list<accountLocationWrapper> lstALW = new list<accountLocationWrapper>();
        /*Query accounts records with billing address information */  
        for(account acc : [Select Name,description, BillingCountry, BillingCity, BillingPostalCode, BillingStreet, BillingState
                           From Account
                           Where BillingCountry != null
                           And BillingCity != null
                           limit 10]){
                               // first create "locationDetailWrapper" instance and set appropriate values
                               locationDetailWrapper oLocationWrap = new locationDetailWrapper();
                               oLocationWrap.Street = acc.BillingStreet;
                               oLocationWrap.PostalCode = acc.BillingPostalCode;
                               oLocationWrap.City = acc.BillingCity;
                               oLocationWrap.State = acc.BillingState;
                               oLocationWrap.Country = acc.BillingCountry;
                               
                               // create "accountLocationWrapper" instance, set values and add to final list. 
                               accountLocationWrapper oWrapper = new accountLocationWrapper();
                               oWrapper.icon = 'utility:location'; // https://www.lightningdesignsystem.com/icons/#utility
                               oWrapper.title = acc.Name;
                               oWrapper.description = acc.description;
                               oWrapper.location = oLocationWrap;
                               
                               lstALW.add(oWrapper);
                           }
        // retrun the "accountLocationWrapper" list
        return lstALW;
    }
    /* wrapper class to store required properties for "lightning:map" component' */ 
    public class accountLocationWrapper{
        @AuraEnabled public string icon{get;set;} 
        @AuraEnabled public string title{get;set;} 
        @AuraEnabled public string description{get;set;} 
        @AuraEnabled public locationDetailWrapper location{get;set;} 
    }
    /* sub wrapper class to store location details for "accountLocationWrapper" location property.*/ 
    public class locationDetailWrapper{
        @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;}
    }
}

Step 2 : Lightning Component [lightningMap.cmp]

From developer console >> file >> new >> Lightning Component

<!--
Support API : 44.00
Author : Piyush Soni
Source : sfdcMonkey.com
-->
<aura:component controller="lightningMapController">
    <!-- aura attributes to store Map component information -->
    <aura:attribute name="mapMarkersData" type="Object"/>
    <aura:attribute name="mapCenter" type="Object"/>
    <aura:attribute name="zoomLevel" type="Integer" default="4" />
    <aura:attribute name="markersTitle" type="String" />
    <aura:attribute name="showFooter" type="Boolean" default="true"/>
    
    <!-- init handler which will call 'doInit' fucntion on component load-->
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    
    <!-- render map component only when we have at least 1 record in list.(mapMarkersData) -->   
    <aura:if isTrue="{!v.mapMarkersData.length > 0}" >
        <!-- the map component -->
        <lightning:map mapMarkers="{! v.mapMarkersData }"
                       center="{! v.mapCenter }"
                       zoomLevel="{! v.zoomLevel }"
                       markersTitle="{! v.markersTitle }"
                       showFooter="{ !v.showFooter }" />
    </aura:if>
</aura:component>

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.
• for more details check here.

How To Fetch Multi Picklist Values From sObject To lightning:dualListbox Component

JavaScript Controller : [lightningMapController.js]

({
    doInit: function (component, event, helper) {
        // call getLocation apex class method 
        var action = component.get("c.getLocation");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                // set mapMarkersData attribute values with 'accountLocationWrapper' data 
                component.set('v.mapMarkersData',response.getReturnValue());
                // set the mapCenter location.
                component.set('v.mapCenter', {
                    location: {
                        Country: 'United States'
                    }
                });
                // set map markers title  
                component.set('v.markersTitle', 'Google Office locations.');
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);
    }
})

Lightning Application – From developer console >> file >> new >> Lightning Application

TestApp.app

<aura:application extends="force:slds">
    <c:lightningMap/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Output :

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

 Let us know if it helps you 🙂

people also check : How to Use Custom Font In Lightning Component Using Static Resource