How to Listen DOM Events in Maps?

Introduction:

In this tutorial, we will learn how to listen to DOM Events.

Custom events are created and managed through the Maps JavaScript API event model. The DOM (Document Object Model) within the browser, on the other hand, develops and dispatches its own events based on the browser event model in use. The Maps JavaScript API includes the addDomListener() static function to listen to and connect to DOM events if you want to record and respond to these events.

This convenience method has a signature as shown below:

addDomListener(instance:Object, eventName:string, handler:Function)

where instance may be any DOM element supported by the browser, including:

• Hierarchical members of the DOM such as window or document.body.myform
• Named elements such as document.getElementById(“foo”)

Note: It should be noted that addDomListener() sends the specified event to the browser, which handles it according to the browser’s DOM event model; however, almost all modern browsers support DOM Level 2 at the very least.

This example listens for DOM events. It displays an alert when the DIV containing the map is clicked.

Code:

function initMap(): void {
  const mapDiv = document.getElementById("map") as HTMLElement;
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

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.

center: new google.maps.LatLng(-34.397, 150.644),

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

zoom: 8,

• 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 mapDiv = document.getElementById("map") as HTMLElement;

• Next, we add a DOM event here to show an alert if the DIV containing the map is clicked.

google.maps.event.addDomListener(mapDiv, "click", () => {  }

• Thus, the addDomListener() is created and alert is added.
• Lastly, the function is called and executed.

window.initMap = initMap;

Conclusion:

Thus, in this tutorial we learned how to listen to DOM Events. We also saw an example that displays an alert when the DIV containing the map is clicked.

Live Example