How to get Lat/Lng from a click Event in Maps?

Introduction:

In this tutorial, we will learn how to get the longitude and latitude of the map coordinates from the click Event.

This example listens for the click event, retrieves the click’s latitude and longitude coordinates from google.maps.MapMouseEvent.latLng, and displays those coordinates in an info window.

Code:

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,
  });

  infoWindow.open(map);

  // Configure the click listener.
  map.addListener("click", (mapsMouseEvent) => {
    // Close the current InfoWindow.
    infoWindow.close();

    // Create a new InfoWindow.
    infoWindow = new google.maps.InfoWindow({
      position: mapsMouseEvent.latLng,
    });
    infoWindow.setContent(
      JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2)
    );
    infoWindow.open(map);
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
export {};

Explanation:

• The function initMap() is created and it consists of the map properties.
• The ‘centre’ attribute defines where the map should be centered with the help of the latitude and longitude coordinates.

const myLatlng = { lat: -25.363, lng: 131.044 };
center: myLatlng,

• The ‘zoom’ attribute specifies the map’s zoom level.

zoom: 4,

• The line, “map = new google.maps.Map(document.getElementById(“map”)”; creates a new map inside the <div> element with the help of the mentioned id which is ‘map’ as an HTMLElement.

 const map = new google.maps.Map(document.getElementById("map")!,

• Next, the new InfoWindow() is created which will pop, “Click the map to get Lat/Lng!!”.

let infoWindow = new google.maps.InfoWindow({
    content: "Click the map to get Lat/Lng!",
    position: myLatlng,
  });

• Next, the click listerner is configured.

map.addListener("click", (mapsMouseEvent) => { }

• Followed by this, the current InfoWindow is closed.

infoWindow.close();

• After, a new InfoWindow is created setting the new longitude and the latitude.

infoWindow = new google.maps.InfoWindow({
      position: mapsMouseEvent.latLng,
    });
    infoWindow.setContent(
      JSON.stringify(mapsMouseEvent.latLng.toJSON(), null, 2)
    );
    infoWindow.open(map);
  });

• Lastly, the function is called and executed.

window.initMap = initMap;

Conclusion:

In this tutorial we learned about how to get the longitude and latitude of the map coordinates from the click Event. We also saw an example that listens for the click event, retrieves the click’s latitude and longitude coordinates from google.maps.MapMouseEvent.latLng, and displays those coordinates in an info window.

Live Example