Display Maps in LWC

-

 


In this blog, we will look at how to display Google Maps in your Lightning Web Components. Salesforce provides a lightning-map component to display a map of one or more locations, using geocoding data and mapping imagery from Google Maps. 

Now, let's look at how to use this component in your Lightning Web component.

HTML:


  • Pass the location(s) that you want to display in the map-marker property.
  • A marker contains:
    • Location Information: A coordinate pair of latitude and longitude, or an address composed of address elements to be geocoded.
    • Descriptive Information: Optional title, description, and an icon. These items are relevant to the marker but not specifically related to location.
Map markers have a few more properties that can be used to customize the map display, please refer to this documentation on Maps.


Display a Single Marker

Let's understand how we can pass single location info in the map-marker and display it on the map.

In this example, we will create a new Lightning Web Component to display the location of the contact on the Contact Page.

Apex Class:



JavaScript:



Output:




In the above example, I have created a lightning web component to display the location of a Contact on the standard contact page.

Now let's look at how we can display multiple addresses.


Display Multiple Addresses

You can pass multiple markers in map-marker array and the lightning-map component will render a list of tiles with location tiles and addresses, with a heading displayed above the list. Each location tile contains an icon, a tile, and an address.

Let's take a look at an example.

HTML:



  • mapMarkers property will contain a list of multiple addresses.
  • markers-title is used to provide a custom heading for the locations.

JavaScript:



Output:




Thank you for reading the blog. 

You can share your thoughts with me by dropping a message to me on LinkedIn

You can find my other blogs on my blog page - LWC - Blog


Comments

Post a Comment

Popular posts from this blog

Calling Apex method from LWC

-
Image
  In this blog post, we will take a look at the steps to call an Apex method from our Lightning Web Component with source code and demonstration videos. There are the following ways to call an Apex method into LWC: 1. Calling an Apex method using  wire services . 2. Calling an Apex method imperatively . 3. Calling and Apex method with async and await . Now let's take a look at the steps involved in the above-mentioned ways. Calling Apex method using Wire services The wire service in LWC helps in the retrieval of data or performing any action without the need for Apex code. You can use the wire service, to wire a property or a function that will receive data when the source is updated. 1. Expose the Apex method which you want to call from LWC The Apex method should be: a. Global or Public . b. decorated with @AuraEnabled , if the method has ( cacheable=true ) after this annotation, the results are cached at the client site to improve performance. 2. Import the Apex method whic...
Read more

Navigation Service in LWC (Lightning Web Components)

-
Image
Introduction Navigation Service in LWC simplifies navigating between the pages within the applications. Utilizing the navigation service in LWC you can create a smooth and seamless navigation experience for users within your Salesforce application. In this blog post, we will deep dive into the steps on how to use the Navigation Service. What is a Navigation Service? Navigation Service is a built-in module in LWC that enables developers to navigate different pages and components within the Salesforce ecosystem. This service provides you with a set of methods that helps you navigate different web pages, record pages, or other Lightning Components.  Using the Navigation Service 1. Import the Navigation Service from the lightning/navigation module. 2. Apply the NavigationMixin function to the base class. 3. Create a JS PageReference object that defines the page. 4. Call the navigation service's [NavigationMixin.Navigate](pageReference) to dispatch the navigation request. 5. In ...
Read more