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 que se indican mediante 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 una InfoWindow abierta, dicha InfoWindow se cerrará cuando aparezca la vista de detalles del lugar y se volverá a abrir cuando el usuario cierre esta vista.

Comprende el código

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

Cuando se abre la vista de detalles del lugar y llamas a InfoWindow.close(), se quita la InfoWindow abierta del DOM. Para crear el efecto de "volver a abrir" la InfoWindow, debes almacenar las propiedades de la InfoWindow en una variable fuera del DOM para que puedas volver a crear la InfoWindow cuando quieras volver a mostrarla. El mejor momento para guardar la información en una variable de almacenamiento es cuando se crea la 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,
  };
}

Luego, cuando se cierre la vista de detalles del lugar, podrás llamar a la misma función de creación InfoWindow para recrear la última 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

Dado que este mapa cuenta con varios marcadores de distrito que el usuario puede elegir, el origen de directionsOptions se actualiza 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.

Prueba la muestra