Grab Deal : Flat 30% off on live classes + 2 free self-paced courses! - SCHEDULE CALL

- Salesforce Blogs -

How to Build Lightning Map in Salesforce?


Salesforce is a name that does not require an introduction anymore. It is the best technology that the market has ever seen. It is ever-growing and ever-expanding, that is why it has maintained its lead in this market where new competition is always a few seconds away only. Salesforce's biggest advantage is its triannual update. This way they get to fix all the previous issues and release new functioning mechanisms within no time.

Today we will discuss one revolutionary functionality that Salesforce 2019 release has issued and i-e Lightning Map in Salesforce. The lightning map component securely displays a map of one or more locations using Google Maps. Here, in this blog, we will discuss the lightning map in detail along with map methods in Salesforce and a map example in Salesforce. To make this a bit little more interesting and easier to understand, we have divided the blog into the following sections-

Lightning Map in Salesforce

With Salesforce winter 19 discharge, Salesforce presented the lightning map segment that will show the Google Maps on lightning experience. Before winter 19 discharge, we used to complete a hack to demonstrate the Google Maps on the lightning component by utilizing a visual force page.

Most interchanges from Salesforce about the Lightning Experience say that it's something beyond a refreshed work area (UI). While that is completely valid, I would prefer not to make light of how much a decent UI helps the personal satisfaction for higher ed clients. Truly, we have toiled under awful UIs from ed-tech organizations for such a long time that the enhancement was not really required when looking at the current, "classic" interface to our different frameworks. All things considered, the new interface of lightning is even more wonderful and enjoyable for the clients in light of these key enhancements.

In the first place, access to Salesforce objects is now patched up with the ability to find a real collapsible route, much like the Salesforce1 mobile experience, opening up screenland and making it simpler to see a greater amount of map visibility and locations immediately. In spite of the way that most higher ed clients are as yet fastened to work areas and workstations, the UI brings together the client experience, taking the good features from the mobile experience and making it accessible to work area clients. Second, the "autosave" usefulness for the maps and locations guarantees a superior affair all through the Org and the way that Notes presently incorporates rich-content capacities and the capacity to relate a Note to numerous records is a great thing.

lightning Map Salesforce:

This base lightning part is equipped for rendering google maps alongside single/different markers. The Lightning map in Salesforce is very useful for developers. It acknowledges both the following sort of areas:

  1. Latitude & Longitude
  2. Complete location parts like Street, City, State etc. 

There are 5 distinctive location segments which are-Street, City, State, Country, Pin Code Lightning Map in Salesforce For modifying the segment, we have a few traits. Like

Read: 10 Reasons You should use Salesforce Lightning Design System and Why it is Awesome?
  • zoomlevel– The component required for setting a specific zoom level.
  • mapmarkers– The component which holds a list of location data
  • markerstitle– The component that provides title for each marker
  • showfooter– The component that enables you to show a footer with the google map link

Different map methods in Salesforce are:

  • put(key, value)
  • clear()
  • get(key)
  • keySet()
  • values()
  • size()
  • clone()

Steps for Lightning Map Component built with the popular Leaflet open-source library

Figure out how to make a Map part utilizing Lightning Components. Well-ordered guidelines and source code are given. This part additionally tells the best way to stack outside Javascript libraries and CSS templates utilizing the long: require a tag.

Lightning Map in Salesforce

The most ideal approach to explore different avenues regarding another part structure is to make segments, and a basic Map segment is regularly one of the main things that immediately ring a bell.

Step 1: Import Leaflet as a Static Resource

The Leaflet is an open-source JavaScript library that is utilized for versatile mobile-friendly interactive and intelligent maps. It has all the mapping highlights. It works great overall media screens. Execution and structure of pamphlets are standard. It very well may be stretched out by bunches of modules and it has added a lovely and an all-around recorded API which causes engineers to structure a particular kind of map in Salesforce. On the off chance that we are discussing the utilization of handout map in the salesforce lightning part. We can without much of a stretch use it by bringing in Leaflet as a static asset in our Salesforce Org. Download the flyer compress record from the Salesforce website. Include static asset utilizing steps:

Setup - > Build - > Develop - > Static Resources - > New.

Write the name and choose downloaded compress record from the link that appears and save

  • Download the most recent stable variant of the handout
  • In Setup, go to Build > Develop > Static Resources, and snap New.
  • Specify leaflet (all lowercase) as the Name, click on the Choose File tab and select the leaflet zip file that you have just downloaded.
  • Click on Save.

Step 2: Create the Component

  • In the Developer Console, click File > New > Lightning Component to create a new lightning map Salesforce component. Determine MyMap as the package name and snap-on Submit option
  • Implement the Component as follows:Lightning Map in Salesforce
  • Click on the following option File > Saveto be able to save the file
  • Thereafter click on CONTROLLER( given at the upper right corner of the code editor), and execute the controller as follows:Lightning Map in Salesforce
  • Click on File then Save option to save the file
  • Click on STYLE tab (given at the upper right corner of the code editor), and then execute the following style:Lightning Map in Salesforce
  • Lastly, Click File > Saveto save the file

Step 3: Deploy the Component in the Salesforce1 App

To be able to add a Tab for the Lightning Component:

Read: What is Apex String Class in the Salesforce?
  • In the Setup menu, click on Create > Tabs.
  • Then click on New option in the Lightning Component Tabs
  • Choose c: MyMapas the Lightning Component.
  • Thereafter you must specify My Mapas the button Label and My_Map as the Button Name.
  • After that click on the magnifier icon given there and select lightning as the tab icon.
  • Lastly clicks on Next option and then

To add the Tab to the Salesforce1 App Menu:

  • In Setup, Select Administer > Mobile Administration > Mobile Navigation.
  • Select My Map in the Available rundown.
  • Click on the Add option.
  • Select My Map in the Selected List and snap the Up catch to move the tab up in the menu request.
  • Lastly, click on Save option.

You would now be able to test the component in the Salesforce1 application on your gadget. Then again, you can review the segment in the Salesforce1 application test system:

  • In your program, expel the piece of the URL that comes following
  • Append/one/ to the URL following and press Enter: this begins the Salesforce1 Application test system.
  • Click on the menu catch in the upper left corner.
  • Select My Map on the menu.
  • Preview the component. 

Salesforce Training For Administrators & Developers

  • Personalized Free Consultation
  • Access to Our Learning Management System
  • Access to Our Course Curriculum
  • Be a Part of Our Free Demo Class

Google Maps with lightning: map component

The lightning map Salesforce segment safely shows a guide of at least one or more areas utilizing Google Maps. You can pass markers to the part to characterize the areas to delineate. A marker can be an arrange pair of scope and longitude, or a lot of location components: City, Country, PostalCode, State, and Street. You have to pass the locationmapMarkers property to show the guide. You can utilize the following marker properties to customize the map display.

location object Address components (City, Country, PostalCode, State, and Street) or a lot of scope and longitude arranges. On the off chance that you indicate address components and arranges for one area, the guide utilizes the directions. To help solid geocoding of addresses, in the event that you indicate Street, you should likewise determine no less than one of City, Country, PostalCode or State.
title string The heading showed in the information window that is demonstrated when you click a marker.
description string The data showed in the information window that is demonstrated when you click a marker.
icon string The symbol that is shown beside the area title and address. Just Lightning Design System symbols are bolstered. Custom marker symbols are right now not upheld. The default is standard: location. For more data, see Displaying Multiple Addresses.


For Map example in Salesforce:


Read: All you want to know about Junction Object - Salesforce



map-markers is a variety of markers that demonstrate area. A marker contains Location Information: This can be a coordinate pair of scope and longitude or a location made out of location components. Descriptive Information: This is data like title, portrayal and a symbol which is data applicable to the marker yet not explicitly identified with the area. free salesforce demo The area data bolsters the accompanying location components: City, Country, PostalCode, State, and Street. Note that to help dependable geocoding of addresses, if Street is indicated, no less than one of City, Country, PostalCode or State must be determined.

Salesforce Training For Administrators & Developers

  • No cost for a Demo Class
  • Industry Expert as your Trainer
  • Available as per your schedule
  • Customer Support Available


I am sure that you have gotten what you have been looking for in the blog. It discusses everything with respect to the Salesforce lightning map component. We have discussed in detail - the basics of the lightning map along with the steps for the lightning map Salesforce, how to use map methods in Salesforce and a map example in Salesforce. Since the feature is new, there is a whole lot more to come on it yet.

Read: What is the Salesforce AppExchange? Packages Installation Guide

Salesforce Tutorial Overview

fbicons FaceBook twitterTwitter lingedinLinkedIn pinterest Pinterest emailEmail


    JanBask Training

    A dynamic, highly professional, and a global online training course provider committed to propelling the next generation of technology learners with a whole new way of training experience.

  • fb-15
  • twitter-15
  • linkedin-15


Trending Courses

Cyber Security Course

Cyber Security

  • Introduction to cybersecurity
  • Cryptography and Secure Communication 
  • Cloud Computing Architectural Framework
  • Security Architectures and Models
Cyber Security Course

Upcoming Class

-1 day 12 Jul 2024

QA Course


  • Introduction and Software Testing
  • Software Test Life Cycle
  • Automation Testing and API Testing
  • Selenium framework development using Testing
QA Course

Upcoming Class

-1 day 12 Jul 2024

Salesforce Course


  • Salesforce Configuration Introduction
  • Security & Automation Process
  • Sales & Service Cloud
  • Apex Programming, SOQL & SOSL
Salesforce Course

Upcoming Class

3 days 16 Jul 2024

Business Analyst Course

Business Analyst

  • BA & Stakeholders Overview
  • BPMN, Requirement Elicitation
  • BA Tools & Design Documents
  • Enterprise Analysis, Agile & Scrum
Business Analyst Course

Upcoming Class

-1 day 12 Jul 2024

MS SQL Server Course

MS SQL Server

  • Introduction & Database Query
  • Programming, Indexes & System Functions
  • SSIS Package Development Procedures
  • SSRS Report Design
MS SQL Server Course

Upcoming Class

7 days 20 Jul 2024

Data Science Course

Data Science

  • Data Science Introduction
  • Hadoop and Spark Overview
  • Python & Intro to R Programming
  • Machine Learning
Data Science Course

Upcoming Class

6 days 19 Jul 2024

DevOps Course


  • Intro to DevOps
  • GIT and Maven
  • Jenkins & Ansible
  • Docker and Cloud Computing
DevOps Course

Upcoming Class

-1 day 12 Jul 2024

Hadoop Course


  • Architecture, HDFS & MapReduce
  • Unix Shell & Apache Pig Installation
  • HIVE Installation & User-Defined Functions
  • SQOOP & Hbase Installation
Hadoop Course

Upcoming Class

0 day 13 Jul 2024

Python Course


  • Features of Python
  • Python Editors and IDEs
  • Data types and Variables
  • Python File Operation
Python Course

Upcoming Class

-1 day 12 Jul 2024

Artificial Intelligence Course

Artificial Intelligence

  • Components of AI
  • Categories of Machine Learning
  • Recurrent Neural Networks
  • Recurrent Neural Networks
Artificial Intelligence Course

Upcoming Class

6 days 19 Jul 2024

Machine Learning Course

Machine Learning

  • Introduction to Machine Learning & Python
  • Machine Learning: Supervised Learning
  • Machine Learning: Unsupervised Learning
Machine Learning Course

Upcoming Class

-1 day 12 Jul 2024

 Tableau Course


  • Introduction to Tableau Desktop
  • Data Transformation Methods
  • Configuring tableau server
  • Integration with R & Hadoop
 Tableau Course

Upcoming Class

0 day 13 Jul 2024

Search Posts


Receive Latest Materials and Offers on Salesforce Course