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 associato a un indicatore interattivo, ma puoi anche associarlo a coordinate LatLngAltitude specifiche 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 marcatore. Se utilizzi un marcatore, verrà utilizzata la posizione del marcatore.
  • altitudeMode: Come viene interpretata l'altitudine del popover.
  • lightDismissDisabled: indica se il popup rimane aperto quando l'utente fa clic al di fuori o preme il tasto Esc. Se questa opzione è impostata su true, sulla mappa possono essere visualizzati contemporaneamente più popup lightDismissDisabled.
  • open: indica se il popup deve essere aperto o meno. Il valore predefinito è false.

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

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

Ancorare un popup 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 { 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',
        gestureHandling: 'COOPERATIVE',
    });

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

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