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 da 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 marcatore, verrà utilizzata la posizione del marcatore.
  • 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.

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

Se vuoi dimensionare esplicitamente i contenuti, puoi inserirli in un elemento <div> e applicare uno stile a <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 { 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 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',
    });

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