Handling Events and User Interaction

Stay organized with collections Save and categorize content based on your preferences.

You can handle events on both the LocalContextMapView instance, as well as on the internal map. The LocalContextMapView supports just two events, which fire when a user selects a place (opening the place details view), and when the user closes the place details view. These events enable you to update any UI elements.

  • placedetailsviewshowstart is fired when the user selects a place, before the place details view is displayed.
  • placedetailsviewhidestart is fired when the user closes the Place Details View, before the place details view is hidden.

The following example shows setting both supported listeners on a LocalContextMapView instance (you can do this in your initMap() function):

// Set the LocalContextMapView event handlers.
localContextMapView.addListener('placedetailsviewshowstart', () => {
  console.log("The 'placedetailsviewshowstart' event just fired!");

localContextMapView.addListener('placedetailsviewhidestart', () => {
  console.log("The 'placedetailsviewhidestart' event just fired!");

You can also handle user interface events on the map that was created from the LocalContextMapView. The following example shows an event handler that is fired whenever the map detects a mouseover event:

// Set a mouseover event handler on the inner map.
localContextMapView.map.addListener('mouseover', () => {
  console.log("The mouse just entered the map!");

LocalContextMapView also closes the place details view or photo lightbox when the escape key is pressed. If you want to change this behavior, we recommend that you add a listener for the keydown event and the escape key in the capturing phase to the window object to intercept the default behavior:

// Change the escape key behavior.
window.addEventListener('keydown', event => {
  if (event.key !== 'Escape') return;
  // Handle the event.
  // ...
}, /* useCapture= */ true);

Alternatively, to allow LocalContextMapView to handle keyboard events before your code, register a keydown listener on the window in the bubble phase:

// Won't be fired if LocalContextMapView handled the escape key to close
// the place details view or photo lightbox:
window.addEventListener('keydown', event => {
  if (event.key !== 'Escape') return;
  // Handle the event.
  // ...
}, /* useCapture= */ false);

Learn more

  • See events in action! The Local Context Library samples demonstrate common uses of the Local Context Library, including implementation details.
  • Read more about Events in the Maps JavaScript API.