How to Create Mark Locations On Google Map With Salesforce Lightning Component

Hello friends today post , how to Mark Locations On Google Map With Salesforce Lightning Component...
so let us start..

Step=>1.
                   goto developer console
                                                         File=>New =>Apex Class
first create apex class to fetch location for mark

                              lightningMapController.apxc

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';
                               oWrapper.title = acc.Name;
                               oWrapper.description = acc.description;
                               oWrapper.location = oLocationWrap;
                             
                               lstALW.add(oWrapper);
                           }
     
        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.

        Create Lightning Component from File=>New=>Lightning Component

              lightningMap.cmp

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

Step=>3.

                    lightningMapCotroller.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);
    }
})

                                                    Output:

Buy me a coffee