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. Los popovers se muestran como un diálogo a los lectores de pantalla.

Por lo general, se adjunta un cuadro emergente a un marcador interactivo, pero también se puede adjuntar a una coordenada LatLngAltitude específica o desplazarlo de un marcador.

Agrega una ventana emergente

El constructor PopoverElement toma un literal de objeto PopoverElementOptions, que especifica los parámetros iniciales para mostrar el cuadro 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 utilizará su posición.
  • altitudeMode: Es la forma en que se interpreta la altitud del cuadro emergente.
  • lightDismissDisabled: Indica si el cuadro emergente permanece abierto cuando el usuario hace clic fuera de él o presiona la tecla Esc. Cuando esta opción se establece en true, se pueden mostrar varios cuadros emergentes de lightDismissDisabled en el mapa de forma simultánea.
  • open: Indica si el cuadro emergente debe estar abierto 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. Los popovers se pueden desplazar de forma predeterminada y tienen una altura máxima predefinida.

Cómo fijar un cuadro emergente a una coordenada LatLngAltitude

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

async function init() {
    const { Map3DElement, 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: 'HYBRID',
    });

    const popover = new PopoverElement({
        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);
}

void init();

Cómo fijar un cuadro emergente a un marcador

Puedes fijar ventanas emergentes a los marcadores. Cuando agregas un cuadro emergente fijado a un marcador, configuras la opción PopoverElement.positionAnchor para usar el marcador.

async function init() {
    const { Map3DElement, Marker3DInteractiveElement, 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: 'HYBRID',
    });

    // Popovers can only be added to interactive Markers
    const interactiveMarker = new Marker3DInteractiveElement({
        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', () => {
        // 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);
}

void init();

Cómo fijar un cuadro emergente a un marcador con HTML

También puedes fijar ventanas emergentes a los 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>

Agrega contenido personalizado a un cuadro emergente

Puedes agregar contenido personalizado a los cuadros 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();