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. El objeto popover 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 objetos popover se muestran como un diálogo a los lectores de pantalla.

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

Cómo agregar un objeto popover

El PopoverElement constructor utiliza un literal de objeto PopoverElementOptions, que especifica los parámetros iniciales para mostrar el objeto 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: Es la forma en que se interpreta la altitud del objeto popover.
  • lightDismissDisabled: Indica si el objeto 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 objetos popover lightDismissDisabled en el mapa de forma simultánea.
  • open: Indica si el objeto 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 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 objetos popover se pueden desplazar de forma predeterminada y tienen una altura máxima predefinida.

Cómo anclar un objeto popover a una coordenada LatLngAltitude

Cuando creas un objeto popover, este no se muestra en el mapa automáticamente. Para que el objeto popover sea visible, debes configurar 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 { 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 anclar un objeto popover a un marcador

Puedes anclar objetos popover a marcadores. Cuando agregues un objeto popover anclado a un marcador, configura 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 anclar un objeto popover a un marcador con HTML

También puedes anclar objetos popover 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 un objeto popover

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