Popover

Un popover mostra contenuti (in genere testo o immagini) in una finestra di dialogo sopra la mappa, in una determinata posizione. Il popover ha un'area di contenuti e un gambo affusolato. La punta del gambo è collegata a una posizione specificata sulla mappa. I popover vengono visualizzati come una finestra di dialogo per gli screen reader.

In genere, un popover viene collegato a un indicatore interattivo, ma puoi anche collegarlo a una coordinata LatLngAltitude specifica o spostarlo da un indicatore.

Aggiungere un popover

Il PopoverElement costruttore accetta un PopoverElementOptions oggetto letterale, 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 posizione dell'indicatore.
  • altitudeMode: la modalità di interpretazione dell'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, è possibile visualizzare contemporaneamente più popover lightDismissDisabled sulla mappa.
  • open: indica se il popover deve essere aperto o meno. Il valore predefinito è false.

Il contenuto di PopoverElement può contenere una stringa di testo, uno snippet HTML o un elemento DOM. Imposta il contenuto aggiungendolo a PopoverElement in modo esplicito nello slot header o default.

Se vuoi dimensionare in modo esplicito il contenuto, puoi inserirlo in un <div> elemento e applicare lo stile <div> con CSS. Per impostazione predefinita, i popover sono scorrevoli e hanno un'altezza massima predefinita.

Ancorare un popover a una coordinata LatLngAltitude

Quando crei un popover, 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 costruzione o dopo l'istanziazione.

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

Ancorare un popover a un indicatore

Puoi ancorare i popover agli indicatori. Quando aggiungi un popover ancorato a un indicatore, imposta l'opzione PopoverElement.positionAnchor in modo che utilizzi l'indicatore.

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

Ancorare un popover a un indicatore utilizzando HTML

Puoi anche ancorare i popover agli indicatori 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>

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