Popover

Un popover mostra i contenuti (di solito testo o immagini) in una finestra di dialogo sopra la mappa, in una determinata posizione. Il popover ha un'area dei contenuti e un indicatore affusolato. La punta dello stelo è collegata a una posizione specifica sulla mappa. I popover vengono visualizzati come una finestra di dialogo per gli screen reader.

In genere, colleghi un popover a un indicatore interattivo, ma puoi anche collegarlo a una coordinata LatLngAltitude specifica o spostarlo rispetto a un indicatore.

Aggiungi un popover

Il costruttore PopoverElement accetta un oggetto letterale PopoverElementOptions, che specifica i parametri iniziali per la visualizzazione del popover.

L'oggetto letterale PopoverElementOptions contiene i seguenti campi:

  • positionAnchor: la posizione LatLngAltitude in cui visualizzare l'indicatore. Se utilizzi un indicatore, verrà utilizzata la sua posizione.
  • altitudeMode: come viene interpretata l'altitudine del popover.
  • lightDismissDisabled: indica se il popover rimane aperto quando l'utente fa clic all'esterno o preme il tasto Esc. Quando questa opzione è impostata su true, sulla mappa possono essere visualizzati contemporaneamente più popover lightDismissDisabled.
  • open: determina se il popover deve essere aperto o meno. Il valore predefinito è false.

Il contenuto di PopoverElement può includere una stringa di testo, uno snippet di codice HTML o un elemento DOM. Puoi impostare i contenuti aggiungendoli esplicitamente a PopoverElement nello slot header o default.

Se vuoi dimensionare esplicitamente i contenuti, puoi inserirli in un elemento <div> e applicare lo stile a <div> con CSS. I popover sono scorrevoli per impostazione predefinita e hanno un'altezza massima predefinita.

Ancorare un popover a una coordinata LatLngAltitude

Quando crei un popover, questo non viene visualizzato automaticamente sulla mappa. Per rendere visibile il popover, devi impostare l'opzione open su true in PopoverElement. Puoi eseguire questa azione durante la creazione o dopo l'inizializzazione.

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();

Ancorare un popover a un indicatore

Puoi ancorare i popover ai marker. Quando aggiungi un popover ancorato a un indicatore, imposti l'opzione PopoverElement.positionAnchor in modo che utilizzi l'indicatore.

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();

Ancorare un popover a un indicatore utilizzando HTML

Puoi anche ancorare i popover ai marker senza scrivere codice JavaScript, come mostrato di seguito:

<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>

Aggiungi contenuti personalizzati a un popover

Puoi aggiungere contenuti personalizzati ai popover impostando le opzioni header e 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();