Popover

Un popover mostra contenuti (di solito testo o immagini) in una finestra di dialogo sopra la mappa, in una determinata posizione. Il popup ha un'area di contenuti e un gambo affusolato. La punta dello stelo è collegata a una posizione specifica sulla mappa. I popup vengono visualizzati come 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 rispetto a un indicatore.

Aggiungere un popover

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

Il valore letterale dell'oggetto PopoverElementOptions contiene i seguenti campi:

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

I contenuti di PopoverElement possono contenere una stringa di testo, uno snippet di HTML o un elemento DOM. Imposti i contenuti aggiungendoli a PopoverElement esplicitamente nello spazio header o default.

Se vuoi dimensionare esplicitamente i contenuti, puoi inserirli in un elemento <div> e applicare uno stile all'elemento <div> con CSS. Per impostazione predefinita, i popup sono scorrevoli 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 costruzione o dopo l'istanza.

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 popup ai marcatori. Quando aggiungi un popover ancorato a un indicatore, imposta l'opzione PopoverElement.positionAnchor per utilizzare 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 popup ai marcatori 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 popup 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();