Notificaciones emergentes

Un popover muestra contenido (por lo general, texto o imágenes) en una ventana de diálogo sobre el mapa, en una ubicación determinada. El pop-up 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 menús emergentes aparecen como un diálogo para los lectores de pantalla.

Por lo general, adjuntarás un popover a un marcador interactivo, pero también puedes adjuntarlo a una coordenada LatLngAltitude específica o compensarlo desde un marcador.

Cómo agregar un popover

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

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á su posición.
  • altitudeMode: Indica cómo se interpreta la altitud del cuadro emergente.
  • lightDismissDisabled: Indica si el popover 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 popovers lightDismissDisabled en el mapa de forma simultánea.
  • open: Determina si el popover 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 adjuntarlo 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 menús emergentes 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 popover, este no se muestra automáticamente en el mapa. Para que el popover 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 creación de instancias.

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 fijar una ventana emergente a un marcador

Puedes anclar los menús emergentes a los marcadores. Cuando agregas un cuadro flotante anclado a un marcador, debes configurar 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 un cuadro flotante a un marcador con HTML

También puedes anclar los pop-ups a marcadores sin escribir ningún 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 un popover

Para agregar contenido personalizado a los pop-overs, 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();