How to get Properties with Event Handlers?

Introduction:

In this tutorial, we will learn on how to get properties with the help of the Event Handlers. Below example listens for the zoom_changed event and updates an info window when the zoom level changes.

When triggered, none of the MVC state change events in the Maps JavaScript API event system pass parameters. (User events do contain parameters that may be examined.) If you need to inspect a property on an MVC state change, call the getProperty() function on that object explicitly. This inspection will always return the MVC object’s current state, which may or may not be the state when the event was initially fired.

In the following example, we build up an event handler to respond to zoom events by showing that level in an info window.

Code:

function initMap(): void {
  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: originalMapCenter,
    }
  );

  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);

  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom()!);
  });
}

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 originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
center: originalMapCenter,

• 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") as HTMLElement,

• Next, the new InfoWindow() is created that will pop “ change the zoom level”, whenever an event, ‘zoom_changed’ is triggered.

const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

• The new addListener() is created for the ‘zoom_changed’ along with the parameters.

map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom()!);
  });
}

• Lastly, the function is called and executed.

window.initMap = initMap;

Conclusion:

In this tutorial, we learned how to get the properties of the map and change with the help of EventHandlers. We also saw an example, that listens for the zoom_changed event and updates an info window when the zoom level changes.

Live Example