Handling Events and User Interaction

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;
  event.stopPropagation();
  // 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.