function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Yogesh Malbhage 18Yogesh Malbhage 18 

Display Accounts on Google Map in lightning component and more..

We are having a requirement to show Accounts on a google map using a lightning component. Then we need to provide some actions like send email, add to campaign on right click of an Account from map. Can you please tell me what all actions we can perform from map?

Also, We need to display Hotels nearby accounts location on Map and the functionality to add those hotels in SF as an Account on click of a button. Can you please suggest me how we caan achieve this functionality ASAP?
Deepali KulshresthaDeepali Kulshrestha
Hi Yogesh,

As per your requirement, Salesforce introduced the lightning: map component that will display the google maps on lightning experience. So, You can pass markers to the component to define the locations to map. A marker can be a coordinate pair of latitude and longitude, or a set of address elements: City, Country, PostalCode, State, and Street. You need to pass the locationmapMarkers property to display the map.

Here is an example to display Accounts on a google map:

-----Apex Controller---->>

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

-----Lightning Component----->>

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

------JavaScript Controller----->>

({
    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--->>

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


For more information you can follow below link:
http://sfdcmonkey.com/2018/09/16/mark-locations-google-map-salesforce-lightning/
https://rajvakati.com/2018/09/26/creating-google-maps-with-lightningmap-component/

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks.    
Deepali Kulshrestha