Finestre informative

1. Introduzione
2. Aggiungere una finestra informativa
3. Aprire una finestra informativa
4. Chiudere una finestra informativa
5. Spostare una finestra informativa

Introduzione

Un elemento InfoWindow mostra i contenuti (generalmente testo o immagini) in una finestra popup sopra la mappa, in un determinato luogo. La finestra informativa ha un'area dei contenuti e uno stelo rastremato. La punta dello stelo è attaccata a una posizione specificata sulla mappa. Le finestre informative vengono visualizzate come finestre di dialogo per gli screen reader.

In genere puoi associare una finestra informativa a un indicatore, ma puoi anche allegarla a una latitudine/longitudine specifica, come descritto nella sezione sull'aggiunta di una finestra informativa di seguito.

In generale, le finestre informative sono un tipo di overlay. Per informazioni su altri tipi di overlay, consulta la sezione Disegno sulla mappa.

Aggiungere una finestra informativa

Il costruttore InfoWindow accetta un valore letterale di oggetto InfoWindowOptions, che specifica i parametri iniziali per visualizzare la finestra informativa.

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

• content contiene una stringa di testo o un nodo DOM da visualizzare nella finestra informativa.
• pixelOffset contiene un offset dalla punta della finestra informativa alla posizione in cui è ancorata. In pratica, non è necessario specificare questo campo. Puoi lasciarlo sul valore predefinito.
• position contiene l'elemento LatLng a cui è ancorata questa finestra informativa. Nota: è possibile associare un elemento InfoWindow a un oggetto Marker (in questo caso la sua posizione si basa sulla posizione dell'indicatore) o sulla mappa stessa in corrispondenza di un elemento LatLng specificato. Un modo per recuperare un LatLng è utilizzare il servizio di geocodifica. Se apri una finestra informativa su un indicatore, position viene aggiornato automaticamente.
• maxWidth specifica la larghezza massima della finestra informativa in pixel. Per impostazione predefinita, una finestra informativa si espande per adattarsi ai contenuti e esegue il wrapping automatico del testo se questa riempie la mappa. Se aggiungi un maxWidth, la finestra informativa si unisce automaticamente per applicare la larghezza specificata. Se raggiunge la larghezza massima e sullo schermo è presente una verticale, la finestra informativa può espandersi in verticale.

I contenuti dei InfoWindow possono contenere una stringa di testo, uno snippet di codice HTML o un elemento DOM. Per impostare i contenuti, specificali all'interno di InfoWindowOptions o chiama setContent() in modo esplicito su InfoWindow.

Se vuoi dimensionare esplicitamente i contenuti, puoi inserirli in un elemento <div> e applicare uno stile a <div> con CSS. Puoi usare CSS anche per attivare lo scorrimento. Tieni presente che se non attivi lo scorrimento e i contenuti superano lo spazio disponibile nella finestra informativa, potrebbero uscire dalla finestra informativa.

Apri una finestra informativa

Quando crei una finestra informativa, non viene visualizzata automaticamente sulla mappa. Per rendere visibile la finestra informativa, devi chiamare il metodo open() su InfoWindow, trasmettendo un valore letterale dell'oggetto InfoWindowOpenOptions specificando le seguenti opzioni:

• map specifica la mappa o il panorama di Street View su cui aprire la creatività.
• anchor contiene un punto di ancoraggio (ad esempio, Marker). Se l'opzione anchor è null o non è definita, la finestra informativa si aprirà nella relativa proprietà position.

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap(): void {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
    });
  });
}

window.initMap = initMap;
index.js

L'esempio seguente imposta la maxWidth di una finestra informativa: visualizza esempio.

Impostare lo stato attivo su una finestra informativa

Per impostare lo stato attivo su una finestra informativa, chiama il relativo metodo focus(). Ti consigliamo di utilizzare questo metodo insieme a un evento visible prima di impostare lo stato attivo. Chiamare questo metodo su una finestra informativa non visibile non ha alcun effetto. Chiama il numero open() per rendere visibile una finestra informativa.

Chiudere una finestra informativa

Per impostazione predefinita, rimane aperta una finestra informativa finché l'utente non fa clic sul controllo di chiusura (una croce in alto a destra nella finestra informativa) o premi il tasto Esc. Puoi anche chiudere esplicitamente la finestra informativa chiamando il metodo close().

Quando viene chiusa una finestra informativa, lo stato attivo passa nuovamente all'elemento attivo prima che venga aperta la finestra informativa. Se questo elemento non è disponibile, viene spostato di nuovo lo stato attivo sulla mappa. Per eseguire l'override di questo comportamento, puoi ascoltare l'evento closeclick e gestire manualmente lo stato attivo come mostrato nell'esempio seguente:

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

Spostare una finestra informativa

Puoi modificare la posizione di una finestra informativa in due modi:

• Chiama setPosition() nella finestra informativa oppure
• Allega la finestra informativa a un nuovo indicatore utilizzando il metodo InfoWindow.open(). Nota: se chiami open() senza passare un indicatore, InfoWindow utilizzerà la posizione specificata al momento della creazione tramite il valore letterale dell'oggetto InfoWindowOptions.

Personalizzazione

Il corso InfoWindow non offre personalizzazione. Visualizza invece l'esempio di popup personalizzato per scoprire come creare un popup completamente personalizzato.