Cómo responder a eventos de Local Context

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Si tienes un diseño que debe cambiar cuando se muestra la vista de detalles del lugar, usa los objetos de escucha de eventos placedetailsviewshowstart y placedetailsviewhidestart. En la siguiente muestra, hay tres distritos indicados por marcadores personalizados. Cuando el usuario hace clic en uno de estos marcadores de distrito, se abre un InfoWindow que describe el distrito. Si un usuario hace clic en un lugar de interés cuando hay un InfoWindow abierto, se cerrará InfoWindow cuando aparezca esa vista de detalles del lugar y se volverá a abrir cuando el usuario cierre la vista de detalles del lugar.

Comprende el código

Cómo administrar un InfoWindow con los eventos de vista de detalles del lugar

Cuando se abre la vista de detalles del lugar y llamas a InfoWindow.close(), se quita el InfoWindow abierto del DOM. Para crear el efecto de volver a abrir el InfoWindow, debes almacenar las propiedades de InfoWindow en una variable fuera del DOM para que puedas volver a crear el InfoWindow cuando quieras volver a mostrarlo. El mejor momento para guardar la información en una variable de almacenamiento es cuando se crea el InfoWindow.

let infoStorage;

function createInfoWindow(district, marker) {
  // Build the content of the InfoWindow
  let contentDiv = document.createElement('div');
  ...

  // Create and open a new InfoWindow
  infoWindow = new google.maps.InfoWindow();
  infoWindow.setContent(contentDiv);
  infoWindow.open(map, marker);

  // Store key properties of the InfoWindow for future restoration
  infoStorage = {
    'district': district,
    'marker': marker,
  };
}

Más adelante, cuando se cierre la vista de detalles del lugar, podrás llamar a la misma función de creación InfoWindow para recrear el último InfoWindow que se abrió.

TypeScript

localContextMapView.addListener("placedetailsviewhidestart", () => {
  if (infoStorage) {
    createInfoWindow(infoStorage.district, infoStorage.marker);
  }
});

JavaScript

localContextMapView.addListener("placedetailsviewhidestart", () => {
  if (infoStorage) {
    createInfoWindow(infoStorage.district, infoStorage.marker);
  }
});

Cómo actualizar el origen de las instrucciones sobre cómo llegar

Como hay varios marcadores de distrito en este mapa que el usuario puede elegir, actualizamos el origen de directionsOptions al último distrito en el que se hizo clic mediante el uso de estas líneas en el objeto de escucha de clics del marcador. Esto demuestra que directionsOptions se puede actualizar incluso después de que se haya inicializado localContextMapView.

Probar la muestra