Lightning Web Components (LWC) is a modern JavaScript framework used to build responsive, dynamic applications on the Salesforce platform. LWC leverages web standards, allowing developers to utilize the latest JavaScript features and methodologies. Compared to older Salesforce frameworks like Aura and Visualforce, LWC is lightweight, fast, secure, and more efficient in terms of performance.

Additionally, LWC components are highly reusable and integrate seamlessly with other Salesforce components. One such component is the lightning map, which enables developers to display a map with markers for one or more locations within Salesforce. This blog will walk you through a simple Lightning Map LWC example and explain how to integrate maps into your Salesforce apps.

The objective of Integrating Maps into Lightning Web Components

Integrating maps into Lightning Web Components (LWC) enhances the user experience by enabling real-time geospatial data visualization directly within Salesforce. With the lightning-map component, developers can seamlessly display location markers, improving customer insights, field operations, and sales analytics.

This integration helps businesses leverage geolocation data for smarter decision-making and better workflow automation. By combining LWC with geospatial intelligence, organizations can unlock powerful location-based features in their Salesforce applications.

  • Guide Salesforce developers in easily integrating maps into Lightning Web Components using lightning-map.
  • Provide a step-by-step tutorial for seamless implementation.
  • Explain what the lightning map component is and its real-world applications.
  • Help developers enhance user experience and streamline workflows with dynamic map functionality.
  • Encourage exploration of lightning map customization options for tailored solutions.

What is a Lightning Map Component?

The lightning-map component in LWC displays a map with markers for one or more locations within Salesforce. It uses geocoding data to position markers on the map, and it allows developers to:

  • Display single or multiple locations on the map.
  • Pinpoint specific location(s) with markers.
  • Show addresses, descriptions, and additional information for each marker.

Although the functionality may seem complex at first, the lightning-map component relies on Google Maps under the hood, making it highly reliable for accurate geographical data. This component is ideal for applications where users can visualize geographical data, such as customer locations, office branches, delivery addresses, and more.

Getting Started with the Lightning Map: A Simple Example for Displaying Locations and Markers

You might think that using the lightning-map component is complicated, but it’s actually quite simple. In this example, we will create a Lightning Web Component that:

  • Displays a map centered on a specific location.
  • Adds markers for multiple addresses.
  • Displays details like title and description when clicking on a marker.

Step-by-Step Guide: Lightning Map LWC Example

In this step-by-step guide, you can check the process of integrating the lightning-map component into a Lightning Web Component (LWC). You’ll learn how to display location data, add map markers, and show detailed information when interacting with the map.
This tutorial provides hands-on instructions to help Salesforce developers enhance their apps with interactive geospatial features and optimize the user experience with dynamic mapping.

Below are the following steps:
First, let’s create a new Lightning Web Component called navigationMap in Visual Studio Code.

Step 1: Open VS Code and create a new component:

Step 2: Open the newly created navigationMap component folder. You will be working with two files:

navigationMap.html and navigationMap.js.

Your component is ready.

image 14
image 15

Step 3: Import the navigation map into the Salesforce Lightning Web Component Lightning Web Component.

unnamed

You’ll notice immediately that the component is visible wherever you put it, in our case it is an app page.

Step 4: Provide a static location to check if the marker is being placed on the map according to our data or not.

Add the street, city, and state shows the marker on the map.

image 16

Simple, isn’t it? But if it is simple then why stop here? Let’s have some fun with this component.
Let’s add more functionality to it, starting with getting the data from the lead.

Step 5: Create an apex class for the processing of the data, and name the apex class mapLeadAddress.

Step 6: Add the below code.

In the above code, we are adding the parameter into the final query that will be used for getting the data.

Step 7: Add a filter screen which will be used to fetch the map data according to your needs. For that add the code below to make a simple filter screen.

It will look like this.

image 17

Step 8: After you deploy your apex class and the HTML page of the component you can then import that class into the lightning component, and create a function that will process the fields you have filled and call the apex class for the data.

You can always use console.log to see your data in the browser inspect window.

Step 9: Make a query that you will pass to the apex class for processing and then call the apex class with the same parameter to get the data.

Step 10: Now, you can map the response data with the lightning map so it will show the user markers on the map, you can do it by making sure that the mapmarks variable is holding our data, for that we will map the response we got according to our data.

03

If you are following the steps then you will get the response perfectly, and your map will show the data properly.

Till here you have a working lightning map that gets the data from the Lead Object and shows you the marker on the map.

Isn’t it awesome how easily you see your lead address on the map, it will be even better if you can view specific record markers and all the details that are present in the salesforce org.

Also, you can do some of these steps separately like us or make the same component that will do it, following our steps will mean that the cards that will be shown for the information will be a different LWC.

Step 11: Like the first step, use this below line to create a new LWC component.

Add this code to the new component.

mapAddressDetailCard.html

mapAddressDetailCard.js

mapAddressDetailCard.css

Step 12: Make some changes in our previous component as well.

lightningMapDemo.html

lightningMapDemo.js

lightningMapDemo.css

Step 13: That’s how you will have a working card and when you click on that card you will see information about that lead.

03 1

Step 14: Click on the view marker details or directly on the marker to see the lead details.

06

Step 15: You can customize it even more, add more fields to search, or show all data and then filter the specific data. Customization is also possible, making cards more colorful or popping them more.

Express Your Lightning Map: Displaying Data on a Dynamic Map

Whether you’re composing a new Lightning App Page or enhancing an existing component, simply drop in the navigationMap component to bring geographical visualization to your Salesforce app. Adjust the navigation map attributes to customize the map display as per requirement, and watch as it shows your data with precise markers and locations.

05

Conclusion

Understanding the capabilities of the lightning-map component is essential for leveraging its full potential in Salesforce. By identifying the right use cases, you can harness this component to enhance your applications with interactive, location-based data visualization.
As you continue to develop and improve your Salesforce application, integrating Lightning Web Components (LWC) with dynamic map functionality will provide a whole new dimension to visualize and interact with data within your Salesforce org, enriching the user experience and streamlining workflows.

Related Articles
How to Use TypeScript in Salesforce Lightning Web Components (LWC)

TypeScript is a programming language developed by Microsoft; used for enhancing JavaScript by adding different static types. With the help of TypeScript, developers can easily find errors during the development process before the execution. It also makes the code more readable and maintainable. With the successful integration of Salesforce Lightning Web Components (LWC), TypeScript improves […]

Read More
Expert Guide on Seamless Integration of Salesforce and QuickBooks Online

Integrating Salesforce with QuickBooks Online can significantly streamline your business operations, improving data accuracy and efficiency. QB Sync Made Easy offers a seamless solution to synchronize customer and financial data between the two platforms. This expert QuickBooks Online, on the other hand, is a leading accounting tool specifically developed for small and medium-sized businesses that […]

Read More
A Complete Guide to Salesforce CPQ Contract Amendment and Renewal

Salesforce CPQ software offers robust features for managing pricing, product configurations, and quotations. The capacity to effectively modify and renew contracts is essential for businesses managing intricate agreements and long-term partnerships. In this guide, we’ll walk you through the details of contract amendment and renewal processes in Salesforce CPQ. About Salesforce CPQ Contract Amendments Modifications […]

Read More
Step by Step Guide to Configure Email to Salesforce 1 1

In this detailed guide, we will walk you through the significant yet easy steps to configure Email to Salesforce. Without any further ado, let’s get started! About Email to Salesforce As the term refers, Email to Salesforce is valuable for any organization that businesses use as their Customer Relationship Management (CRM) platform. It helps streamline […]

Read More
Guide on CRUD Operations in Node.js with jsForce

CRM developers typically need to integrate Salesforce with Node.js apps. One well-known library for this purpose is jsForce, which provides a comprehensive set of tools for interacting with Salesforce data and performing CRUD tasks effectively. Let’s dive into the blog, where you will understand the use of jsForce to execute key CRUD tasks within Salesforce, […]

Read More
How to Implement Round Robin Assignments in Salesforce Using Apex

Ensuring a proper workload balance and quick follow-ups from internal or external team members, leads, opportunities, or task distributions is crucial. To achieve this, all you need is a Round Robin assignment. In this step-by-step guide, we will walk you through the process of implementing a round-robin assignment in Salesforce using Apex. Here, we’ve used […]

Read More
Our Location worldwide
Indian Flag India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
United States of America Flag USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
United Kingdom Flag UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818