Simple Events

Learn how to handle simple events on a map using event listeners.

We'll cover the following

Javascript is an event-driven programming language we use within a browser. This means that Javascript responds to interactions by generating events and expects a program to listen to these UI events.

There are two types of UI events, which are as follows:

  • State change events reflect changes in certain Maps JavaScript API objects. When an object’s property changes, an event is fired that states that the property has changed. For example, a zoom_changed event will be fired when the map’s zoom level changes.
  • User events are propagated from the DOM to the Maps JavaScript API. An example is a mouse click event.

UI Events

Objects in the Maps JavaScript API respond to user events such as mouse events or keyboard events. Some of the events that correspond to the map object include the following:

  • The bounds_changed event triggers whenever the map view bounds are changed.
  • The center_changed event triggers whenever the center of the map changes.
  • The click event triggers whenever a user clicks on any clickable object on the map or on the map itself.
  • The contextmenu event triggers whenever the user tries to open the DOM context menu event in the map container.
  • The dblclick event triggers whenever the user double-clicks on the map.
  • The drag event triggers whenever the user holds down and drags the map.
  • The dragend event triggers whenever the user stops dragging the map.
  • The dragstart event triggers whenever the user starts dragging the map.
  • The heading_changed event triggers whenever the heading attribute of the map changes.
  • The idle event triggers whenever the map is left idle after zooming or panning.
  • The maptypeid_changed event triggers whenever the user changes the map type.
  • The mousemove event triggers whenever the user moves the pointer across the map.
  • The mouseout event triggers whenever the user moves the pointer off of the map container.
  • The mouseover event triggers whenever the user moves the pointer over the map container from outside.
  • The projection_changed event triggers whenever the projection changes on the map.
  • The rightclick event triggers whenever the user right-clicks on the map.
  • The tilesloaded event triggers whenever the map tiles have finished loading.
  • The tilt_changed event triggers whenever the tilt of the map changes.
  • The zoom_changed event triggers whenever the zoom changes on the map.

Event handling

The addListener() event handler is used to register for event notifications. This method listens for an event and a function that’s called when the event occurs as parameters. Here’s how to add a click listener to a Map object called map:

map.addListener("click", () => {
	// Perform action on click event trigger
});

Code example

In the example below, event listeners are attached to listen for whenever the marker is clicked or the map is panned across.

Console
Simple click events
Here’s a brief explanation of the JavaScript file in the above code widget:


    

  • Line 8: We initialize a Marker object called marker so that we can test our click events on it.
    • 

  • Line 15: We add an event listener to the map object to listen for the center_changed event, which occurs whenever the map center is changed by dragging or panning the map to another map center.
    • 

  • Lines 16–18: The event listener for center_changed triggers a timeout function. This timeout function pans the map back to the marker location using the panTo() method three seconds after the center_changed event occurs.
    • 

  • Lines 23–26: We add a listener for any click events on the marker. The listener handles the click event by first changing the map zoom from 4 to 8 and then changing the map center to that of the marker if the map is not already centered on it.
    •