Display map In flow and LWC

Hello friends, today we will explore Display Map In flow and LWC. Sometimes, data becomes more meaningful when visualized on a map. Imagine enhancing your processes by geographically representing records, locations, or any data that has a spatial context. Develop an LWC with a map component (like Google Maps or Salesforce Maps). Integrate the map component with the data you want to display.

By integrating maps into your Salesforce Flows with Lightning Web Components, you’re not just processing data; you’re crafting a visual journey for your users. Whether it’s monitoring field activities, tracking service requests, or any process that benefits from a geographic perspective, this capability elevates your Salesforce Flow experience.

Also, check this: Custom Validation on LWC Record Form

Key Highlights :

1. Lightning-Fast Integration: Easily embed a Google Map component into your Lightning Web Component
2. Real-Time Data Markers: Showcase dynamic data on the map with markers that update in real-time.
3. Geolocation Services: Leverage geolocation services for accurate and precise location mapping.
4. Real-Time Visualization: Watch as your Flow comes to life with a dynamic and interactive map experience
5. Explore the Documentation: Dive into the comprehensive documentation for integrating Google Maps into your LWC for Flows.

Code :

displayMap.html :

<!--
  @description       : 
  @author            : zuberrangreaz8@gmail.com
  @group             : Techdicer
  @last modified on  : 26-12-2023
  @last modified by  : zuberrangreaz8@gmail.com
  Modifications Log 
  Ver   Date         Author                               Modification
  1.0   26-12-2023   zuberrangreaz8@gmail.com            Initial Version | Story Number
-->
<template>
	<template lwc:if={isMapLoaded}>
		<lightning-map map-markers={mapMarkers} zoom-level="15"> </lightning-map>
	</template>
</template>

displayMap.js :

/**
 * @description       : 
 * @author            : zuberrangreaz8@gmail.com
 * @group             : Techdicer
 * @last modified on  : 30-12-2023
 * @last modified by  : zuberrangreaz8@gmail.com
 * Modifications Log 
 * Ver   Date         Author                               Modification
 * 1.0   30-12-2023   zuberrangreaz8@gmail.com    Initial Version
 * 
**/
import { LightningElement, api } from 'lwc';
export default class DisplayMap extends LightningElement {
    @api street;
    @api city;
    @api country;
    @api title;
    @api description;

    get mapMarkers() {
        return [
            {
                location: {
                    Street: this.street,
                    City: this.city,
                    Country: this.country,
                },

                title: this.title,
                description: this.description,
            },
        ];
    }

    get isMapLoaded() {
        if (this.street && this.city && this.country) {
            return true;
        } else {
            return false;
        }
    }
}

displayMap.js-meta.xml :

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__FlowScreen</target>
	</targets>
	 <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="street" label="street" type="String" role="inputOnly"/>
			<property name="city" label="city" type="String" role="inputOnly"/>
			<property name="country" label="country" type="String" role="inputOnly"/>
			<property name="title" label="title" type="String" role="inputOnly"/>
			<property name="description" label="description" type="String" role="inputOnly"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Flow Display Map :

Output :

Reference :

1. Flow
2. LWC