Get a Quote

Hey, do you want to share your amazing ideas with us, drop your requirements, we are keen to work with you on your fantastic project. We will try to reach you shortly, SEE YOU !

Tell us about you

Tell us about your Project

How to Create a Salesforce Lightning Map Component?

We have all tried to integrate different map APIs in salesforce, most popular being Google Map API. Although we have done a spectacular job while using it, how about using inbuilt functionality that Salesforce provides us with. Let us proceed with Lightning Map Component and how we can put it to our use.

Lightning Map Component Attributes

We shall begin with the attributes used in lightning:map component, which are listed below:

  • class – It is a CSS class for the outer element, in addition to the component’s base classes.
  • title – It displays us tooltip text on mouse hovers the element.
  • zoomLevel – It denotes the zoom levels corresponding with Google Maps API. If it is not specified, the map component automatically defines it according to the screen.
  • mapMarkers(Required) – It defines an array of objects with address/coordinates to be displayed on the map.
  • markersTitle – It provides the heading title for the markers when the map has multiple markers. The title is displayed as a header for the list of clickable addresses.
  • center – It defines the center location for a map, if not defined it is automatically adjusted.
  • showFooter – A link is displayed ‘Open in Google Maps’ in the footer which can open a window externally with the markers in the map.
  • listView – It displays or hides the list of location.

Also Read: How to Create and Use Salesforce Surveys

Let’s understand with given below example

Here is what we are trying to as example, we will display the location of Account through the defined billing address. So here is the code:

Apex Controller:

public with sharing class AccountMapController {
     @AuraEnabled
     public static Account getAccountLocation(string accountId){
        return [Select Id,Name,Website,BillingStreet,BillingCity,BillingState from Account where Id =: accountId];
     }
}

hire salesforce developers

Lightning Component:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"
access="global" controller="AccountMapController"/>
    <!-- attributes -->
   <aura:attribute name="accountLocation" type="Object"/>
   <aura:attribute name="zoom" type="Integer" />
   <aura:attribute name="recordId" type="String" />

   <!-- handlers-->
   <aura:handler name="init" value="{! this }" action="{!c.initialize }"/>

   <!-- the map component -->
   <aura:if isTrue="{!v.accountLocation.length > 0}" >
     <lightning:map mapMarkers="{! v.accountLocation }" zoomLevel="{!v.zoomLevel}" />
   </aura:if>
</aura:component>

Learn More: Benefits of Salesforce Commerce Cloud Implementation

Lightning Component Controller:


({
  initialize : function(component, event, helper) {
    var recordId = component.get('v.recordId');
    var action = component.get('c.getAccountLocation');
    action.setParams({
      'accountId' : recordId
    });
    action.setCallback(this,function(res){
      var state = res.getState();
      if(state==='SUCCESS'){
        console.log(res.getReturnValue());
        var acc = res.getReturnValue();
        component.set('v.accountLocation', [
          {
            location: {
              Street: acc.BillingStreet,
              City: acc.BillingCity,
              State: acc.BillingState
            },
            title: acc.Name,
          description: acc.Website
          }
        ]);
        component.set('v.zoom', 16);
      }
    });
    $A.enqueueAction(action);
  }
})

Output

lightning component output

Also Read: Magento Commerce Cloud Vs Salesforce Commerce Cloud

author profile
About Author
Author Name:
Sapna Chandani

Salesforce Developer

Author Bio:

I am a proficient Salesforce developer with noteworthy experience in the Salesforce consulting domain. Apart from my Job, what evokes curiosity in me is binge-reading, following technical aficionado’s work, and pondering over astonishing things in this universe.

About Emizentech:

An acclaimed IT solution provider and a leading Magento 2 development company with its expertise lies in delivering top of the line ecommerce solutions, Salesforce commerce cloud services, mobile app development and many more verticals.

Relate Contact to Multiple Contacts
27 May, 2020

How To Relate a Contact To Multiple Accounts In Salesforce

With the Salesforce Summer ’16 release, you can relate a single contact to multiple accounts, without duplication! This is a […]
Read more
Salesforce Development
Chatbots in eCommerce Industry
27 May, 2020

How AI Chatbots Are Benefiting The eCommerce Industry?

Whether you call it a revolution or an intrusion, chatbots have gained a significant place in the ecommerce practices. From […]
Read more
Ecommerce Development
Odoo ERP Integration In eCommerce Platform
26 May, 2020

Odoo ERP Integration In eCommerce Platform: Complete Guide

Who knew that shopping online within just a few clicks would be easier than preparing a cup of tea. Ecommerce […]
Read more
Ecommerce Development

Let’s Talk Business

Reach out to us by following below given details, or simply drop us a text to start a conversation, we are here to provide best in class business solutions.

SAY SOMETHING