Finestre di informazioni

Seleziona la piattaforma: Android iOS JavaScript

Una finestra informativa mostra testo o immagini in una finestra popup sopra la mappa. Le finestre informative sono sempre ancorate a un indicatore. Il loro comportamento predefinito è quello di essere visualizzate quando l'indicatore viene toccato.

Esempi di codice

Il repository ApiDemos su GitHub include un esempio che mostra tutte le funzionalità delle finestre informative:

• MarkerDemoActivity - Java: personalizzazione delle finestre informative e utilizzo dei listener delle finestre informative
• MarkerDemoActivity - Kotlin: personalizzazione delle finestre informative e utilizzo dei listener delle finestre informative

Introduzione

Una finestra informativa ti consente di mostrare informazioni all'utente quando tocca un indicatore. Viene visualizzata una sola finestra informativa alla volta. Se un utente fa clic su un indicatore, la finestra informativa corrente viene chiusa e viene visualizzata la nuova finestra informativa. Tieni presente che se l'utente fa clic su un indicatore che attualmente mostra una finestra informativa, questa si chiude e si riapre.

Una finestra informativa viene disegnata orientata rispetto allo schermo del dispositivo, centrata sopra l'indicatore associato. La finestra informativa predefinita contiene il titolo in grassetto, con il testo dello snippet (facoltativo) sotto il titolo.

Aggiungi una finestra informativa

Il modo più semplice per aggiungere una finestra informativa è impostare i metodi title() e snippet() del relativo indicatore. L'impostazione di queste proprietà comporta la visualizzazione di una finestra informativa ogni volta che si fa clic sul relativo indicatore.

Kotlin

val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400"),
)

      

Java

final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne =
        map.addMarker(
                new MarkerOptions()
                        .position(melbourneLatLng)
                        .title("Melbourne")
                        .snippet("Population: 4,137,400"));

      

Mostra/nascondi una finestra informativa

Le finestre informative sono progettate per rispondere agli eventi touch degli utenti. Se preferisci, puoi mostrare una finestra informativa in modo programmatico chiamando showInfoWindow() sull'indicatore di destinazione. Una finestra informativa può essere nascosta chiamando hideInfoWindow().

Kotlin

val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne"),
)
melbourne?.showInfoWindow()
if (melbourne?.isInfoWindowShown == true) {
    melbourne.hideInfoWindow()
}

      

Java

final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne =
        map.addMarker(new MarkerOptions().position(melbourneLatLng).title("Melbourne"));
melbourne.showInfoWindow();
if (melbourne.isInfoWindowShown()) {
    melbourne.hideInfoWindow();
}

      

Puoi anche creare finestre informative per singoli indicatori raggruppati. Leggi la guida per aggiungere una finestra informativa per singoli indicatori raggruppati.

Finestre informative personalizzate

Puoi anche personalizzare i contenuti e il design delle finestre informative. Per farlo, devi creare un'implementazione concreta dell'interfaccia InfoWindowAdapter e poi chiamare GoogleMap.setInfoWindowAdapter() con la tua implementazione. L'interfaccia contiene due metodi da implementare: getInfoWindow(Marker) e getInfoContents(Marker). L'API chiamerà prima getInfoWindow(Marker) e, se viene restituito null, chiamerà getInfoContents(Marker). Se anche questo metodo restituisce null, verrà utilizzata la finestra informativa predefinita.

Il primo (getInfoWindow()) ti consente di fornire una visualizzazione che verrà utilizzata per l'intera finestra informativa. La seconda opzione (getInfoContents()) ti consente di personalizzare solo i contenuti della finestra, mantenendo però la cornice e lo sfondo predefiniti della finestra informativa.

Nota: la finestra informativa disegnata non è una visualizzazione in tempo reale. La vista viene visualizzata come immagine (utilizzando View.draw(Canvas)) al momento della restituzione. Ciò significa che eventuali modifiche successive alla visualizzazione non verranno applicate alla finestra informativa sulla mappa. Per aggiornare la finestra informativa in un secondo momento (ad esempio, dopo il caricamento di un'immagine), chiama showInfoWindow(). Inoltre, la finestra informativa non rispetterà l'interattività tipica di una visualizzazione normale, come gli eventi di tocco o gesto. Tuttavia, puoi ascoltare un evento di clic generico sull'intera finestra informativa, come descritto nella sezione di seguito.

Le immagini di seguito mostrano una finestra informativa predefinita, una finestra informativa con contenuti personalizzati e una finestra informativa con cornice e sfondo personalizzati.

Eventi delle finestre informative

L'esempio MarkerDemoActivity include un codice di esempio per la registrazione e la gestione degli eventi della finestra informativa.

Puoi utilizzare un OnInfoWindowClickListener per ascoltare gli eventi di clic su una finestra informativa. Per impostare questo listener sulla mappa, chiama GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Quando un utente fa clic su una finestra informativa, viene chiamato onInfoWindowClick(Marker) e la finestra informativa viene evidenziata nel colore predefinito (grigio).

Kotlin

map.setOnInfoWindowClickListener { marker ->
    Toast.makeText(
        context,
        "Info window clicked",
        Toast.LENGTH_SHORT,
    ).show()
}

      

Java

map.setOnInfoWindowClickListener(
        new GoogleMap.OnInfoWindowClickListener() {
            @Override
            public void onInfoWindowClick(Marker marker) {
                Toast.makeText(context, "Info window clicked", Toast.LENGTH_SHORT).show();
            }
        });

      

Analogamente, puoi ascoltare gli eventi di clic prolungato con un OnInfoWindowLongClickListener, che puoi impostare chiamando GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Questo listener si comporta in modo simile al click listener e riceverà una notifica sugli eventi di clic prolungato con un callback onInfoWindowClose(Marker).

Per ricevere una notifica quando la finestra informativa viene chiusa, utilizza un OnInfoWindowCloseListener, che puoi impostare chiamando GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Riceverai un callback onInfoWindowClose(Marker).

Nota sull'aggiornamento di una finestra informativa: l'evento onInfoWindowClose() viene attivato se l'utente aggiorna una finestra informativa toccando un indicatore che ha già una finestra informativa aperta. Tuttavia, se chiami Marker.showInfoWindow() in modo programmatico su una finestra informativa aperta, l'evento onInfoWindowClose() non viene attivato. Quest'ultimo comportamento si basa sul presupposto che tu sia consapevole che la finestra informativa si chiuderà e si riaprirà.

Come accennato nella sezione precedente sulle finestre informative, una finestra informativa non è una visualizzazione in tempo reale. La visualizzazione viene invece visualizzata come immagine sulla mappa. Di conseguenza, tutti i listener impostati sulla visualizzazione vengono ignorati e non puoi distinguere tra gli eventi di clic su varie parti della visualizzazione. Ti consigliamo di non inserire componenti interattivi, come pulsanti, caselle di controllo o input di testo, nella finestra informativa personalizzata.