Notificaciones emergentes

Un objeto popover muestra contenido (por lo general, texto o imágenes) en una ventana de diálogo sobre el mapa, en una ubicación determinada. La ventana emergente tiene un área de contenido y un tallo cónico. La punta del vástago se conecta a una ubicación específica en el mapa. Los elementos emergentes aparecen como un diálogo para los lectores de pantalla.

Por lo general, adjuntarás una ventana emergente a un marcador interactivo, pero también puedes adjuntarla a una coordenada LatLngAltitude específica o desplazarla desde un marcador.

Cómo agregar un elemento emergente

El constructor PopoverElement toma un literal de objeto PopoverElementOptions, que especifica los parámetros iniciales para mostrar la ventana emergente.

El literal de objeto PopoverElementOptions contiene los siguientes campos:

  • positionAnchor: Es la posición de LatLngAltitude en la que se mostrará el marcador. Si se usa un marcador, se usará su posición.
  • altitudeMode: Indica cómo se interpreta la altitud de la ventana emergente.
  • lightDismissDisabled: Indica si la ventana emergente permanece abierta cuando el usuario hace clic fuera de ella o presiona la tecla Esc. Cuando esta opción se establece en true, se pueden mostrar varias ventanas emergentes de lightDismissDisabled en el mapa de forma simultánea.
  • open: Indica si la ventana emergente debe estar abierta o no. La configuración predeterminada es false.

El contenido de PopoverElement puede incluir una cadena de texto, un fragmento de HTML o un elemento de DOM. Para establecer el contenido, agrégalo a PopoverElement de forma explícita en la ranura header o default.

Si quieres asignar explícitamente un tamaño para el contenido, puedes agregarlo a un elemento <div> y aplicar un diseño de <div> con CSS. Los elementos emergentes son desplazables de forma predeterminada y tienen una altura máxima predefinida.

Cómo anclar una ventana emergente a una coordenada LatLngAltitude

Cuando creas una ventana emergente, esta no se muestra en el mapa automáticamente. Para que la ventana emergente sea visible, debes configurar la opción open en true en PopoverElement. Puedes realizar esta acción durante la construcción o después de la instanciación.

async function init() {
    const { AltitudeMode, Map3DElement, MapMode, PopoverElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 }, range: 4000, tilt: 74, heading: 38,
        mode: MapMode.HYBRID,
    });
    const popover = new PopoverElement({
        altitudeMode: AltitudeMode.ABSOLUTE,
        open: true,
        positionAnchor: { lat: 37.819852, lng: -122.478549, altitude: 150 },
    });
    popover.append('Golden Gate Bridge');
    map.append(popover);
    document.body.append(map);
}
init();
index.js

Cómo anclar una ventana emergente a un marcador

Puedes anclar ventanas emergentes a marcadores. Cuando agregas una ventana emergente anclada a un marcador, configuras la opción PopoverElement.positionAnchor para usar el marcador.

async function init() {
    const { AltitudeMode, Map3DElement, Marker3DInteractiveElement, MapMode, PopoverElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.8204, lng: -122.4783, altitude: 0.407 }, range: 4000, tilt: 74, heading: 38,
        mode: MapMode.HYBRID,
    });
    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        altitudeMode: AltitudeMode.ABSOLUTE,
        position: { lat: 37.819852, lng: -122.478549, altitude: 100 }
    });
    const popover = new PopoverElement({
        open: false,
        positionAnchor: interactiveMarker,
    });
    popover.append('Golden Gate Bridge');
    interactiveMarker.addEventListener('gmp-click', (event) => {
        // toggle the marker to the other state (unlee you are clicking on the marker itself when it reopens it)
        popover.open = !popover.open;
    });
    map.append(interactiveMarker);
    map.append(popover);
    document.body.append(map);
}
init();
index.js

Cómo anclar una ventana emergente a un marcador con HTML

También puedes anclar ventanas emergentes a marcadores sin escribir código JavaScript, como se muestra a continuación:

<gmp-map-3d mode="hybrid" center="37.819852,-122.478549" tilt="75" range="2000" heading="330">
  <gmp-marker-3d-interactive gmp-popover-target="my-popover" position="37.819852,-122.478549,100"></gmp-marker-3d-interactive>
  <gmp-popover id="my-popover">
    Golden Gate Bridge
  </gmp-popover>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGl0teQ6qwaBEdHazOWIEXd8XGWOZvoaM&v=beta&libraries=maps3d">
</script>

Cómo agregar contenido personalizado a una ventana emergente

Puedes agregar contenido personalizado a las ventanas emergentes configurando las opciones header y content:

async function init() {
  const {Map3DElement, MapMode, PopoverElement, AltitudeMode} = await google.maps.importLibrary('maps3d');

  const map = new Map3DElement({
    center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
    tilt: 75,
    heading: 330,
    mode: MapMode.SATELLITE,
  });

  const popover = new PopoverElement({
    altitudeMode: AltitudeMode.ABSOLUTE,
    open: true,
    positionAnchor: {lat: 37.819852, lng: -122.478549, altitude: 100},
  });

  const header = document.createElement('div');
  header.style.fontWeight = 'bold';
  header.slot = 'header';
  header.textContent = 'Golden Gate Bridge';
  const content = document.createElement('div');
  content.textContent = 'Iconic orange bridge connecting San Francisco to Marin.';

  popover.append(header);
  popover.append(content);

  document.body.append(map);
  map.append(popover);
}

init();