Notificaciones emergentes

Un objeto popover muestra contenido (por lo general, texto o imágenes) en una ventana de diálogo que aparece sobre el mapa, en una ubicación determinada. La ventana emergente tiene un área de contenido y un tallo cónico. La punta del tallo se conecta a una ubicación específica en el mapa. Las ventanas emergentes se muestran como un diálogo a 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 una ventana emergente

El PopoverElement constructor utiliza 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 LatLngAltitude en la que se mostrará el marcador. Si usas un marcador, se usará la posición del marcador.
  • altitudeMode: Es la forma en que 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 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, debes agregarlo a PopoverElement de forma explícita en el espacio 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. Las ventanas emergentes se pueden desplazar 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 establecer la opción open como true en PopoverElement. Puedes realizar esta acción durante la construcción o después de la instancia.

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,
        gestureHandling: 'COOPERATIVE',
    });
    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 agregues una ventana emergente anclada a un marcador, configura 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,
        gestureHandling: 'COOPERATIVE',
    });
    // 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 ningún código de 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

Para agregar contenido personalizado a las ventanas emergentes, configura 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();