Implement Draggable Marker on Map And Move Marker on Map In Lightning Web Component.

Posted on March 31, 2022 Post Thumbnail

Yo Trailblazers,

Welcome back to heySalesforce (-_-)

In this blog post, I'm going to create a Lightning Web Component. In this component, We can drag marker on the Map to get current Coordinates.

Before reading this blog post, Have a look at following demo.

Demo for Draggable Marker on Map.

Map marker in Lwc

What you'll Learn from Blog Post :)

1. Map in Vf Page with draggable marker on Map.

2. Communication between LWC and Vf Page.

Let's Start :)

You must be thinking, Why we are going to create a LWC component instead of using Lightning-Map.

<lightning-map map-markers="{mapMarkers}"> </lightning-map> 

If you read this documentation, It says "Markers aren't draggable"


As we are not able to do this using lightning-map.

I was searching about it, Then I found something on Google Maps Platform where, We can get coordinates by clicking on map. Check following link and screenshot.

It was: Getting Lat/Lng from a Click Event

Code for getting coordinates after clicking on Map.

Code for getting coordinates after clicking on Map.

function initMap() {
  const myLatlng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatlng,
  // Create the initial InfoWindow.
  let infoWindow = new google.maps.InfoWindow({
    content: "Click the map to get Lat/Lng!",
    position: myLatlng,
  // Configure the click listener.
  map.addListener("click", (mapsMouseEvent) => {
    // Close the current InfoWindow.
    // Create a new InfoWindow.
    infoWindow = new google.maps.InfoWindow({
      position: mapsMouseEvent.latLng,
      JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2)

I made some changes to this code to work for Dragging Marker on Map too.

function initMap() {
const myLatlng = { lat: 1.363, lng: 103.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: myLatlng,
// Create the initial InfoWindow.

let marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
marker.addListener("drag", () => {
//"map"), marker);

Have a look at screenshot too.

Draggable Map marker in lwc

After making above change, We are able to move marker on Map.

Let's create a Visualforce page: dragMapMarkerPage

It's pretty simple, I have added comments too.

I'll use this Visualforce page in following LWC component as Iframe source.

<apex:page lightningStylesheets="true" showHeader="false" sidebar="false">
    <apex:slds />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { width:100%;height:100%; }
        <script src=""></script>
            var map;
        //Getting parameters for initial position on map.
        var latitude = '{!$CurrentPage.parameters.latitude}';
        var longitude = '{!$CurrentPage.parameters.longitude}';
        let fullurl = window.location.href;
        //console.log('VF Url: '+fullurl);
        var lwcOrigin = fullurl.slice(0,fullurl.indexOf(".com/")+4);
        let host = '{!$}';
        //Checking if component placed on lightning /in community site.
        if(host ==='lightning')
            lwcOrigin = lwcOrigin.replace("","");
        //Sending coordinates to Lightning Component.
        function sendToLigntningWC(latlng){
            //console.log('LWC Origin: '+lwcOrigin);
            let lightningOrigin = lwcOrigin;
            let messgaeToLWC = latlng;
        //initializing map
        google.maps.event.addDomListener(window, 'load', initialize);
        function initialize() {
            const myLatlng = { lat: parseFloat(latitude), lng: parseFloat(longitude)};
            const map = new google.maps.Map(document.getElementById("map-canvas"), {
                zoom: 15,
                center: myLatlng,
            let marker = new google.maps.Marker({
                draggable: true,
                animation: google.maps.Animation.DROP,
            //function works on dragging of marker.
            marker.addListener("drag", () => {
                latitude = marker.get("position").toJSON().lat;
                longitude = marker.get("position").toJSON().lng;
                let coords = latitude +':'+longitude;
        <div id="map-canvas"/>

Let's create a LWC Component: DragMapMarkerLwc 


        <h3 slot="title">
            <lightning-icon class="slds-m-right_small" icon-name="action:map" size="large"></lightning-icon>
            Drag Map Marker in LWC!
        <lightning-input-location class="slds-m-horizontal_x-large slds-m-bottom_large" label="Default coordinates" latitude={latitude} longitude={longitude}></lightning-input-location>
            <iframe class="slds-m-horizontal_x-large slds-box" height="400px"  scrolling="no" src={mainIframeUrl} frameborder="0"  width="90%">


import { LightningElement,track } from 'lwc';
export default class DragMapMarkerLwc extends LightningElement {
    vfUrl ='/apex/dragMapMarkerPage?';
    latitude = 28.61;
    longitude = 77.21;
        let href = window.location.href;
        this.mainIframeUrl = this.vfUrl+'latitude='+this.latitude+'&longitude='+this.longitude+'&host=classic';
            this.mainIframeUrl = this.vfUrl+'latitude='+this.latitude+'&longitude='+this.longitude+'&host=lightning';
        window.addEventListener( "message", this.handleCoordinates.bind(this), false);
        if( != null){
            let coords =;
            this.latitude = coords.slice(0, coords.indexOf(":"));
            this.longitude = coords.slice(coords.indexOf(":")+1, coords.length);


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">
    <masterLabel>Drag Map Marker LWC</masterLabel>

After Creating Visualforce Page and LWC Component.

Demo for Draggable Marker on Map.

Map in LwC

Use Api key in following code if you want to see clear Map.

<script src=""></script>

Have a look at the demo Again.

Demo for Draggable Marker on Map.

Note: This is just for Study Purposes And I above code may not follow best practices.

If you have any question Ask Me

Thanks for Reading :)

Write a comment for suggestions and hit the heart icon.


Tags: #salesforce #lwc


  • ponnisuresh Avatar
    ponnisuresh - 6 days ago
    Hi This is testing Purpose

Your message is required.

Get notified of new posts