Infofenster

Plattform auswählen: Android iOS JavaScript

In einem Infofenster werden Texte oder Bilder in einem Pop-up-Fenster über der Karte angezeigt. Infofenster sind immer mit einer Markierung verknüpft. Standardmäßig werden sie eingeblendet, wenn der Nutzer auf die Markierung tippt.

Codebeispiele

Das ApiDemos-Repository auf GitHub enthält ein Beispiel, das alle Funktionen des Infofensters zeigt:

• MarkerDemoActivity – Java: Infofenster anpassen und Infofenster-Listener verwenden
• MarkerDemoActivity – Kotlin: Infofenster anpassen und Infofenster-Listener verwenden

Einführung

In einem Infofenster kannst du Informationen für den Nutzer anzeigen, wenn er auf eine Markierung tippt. Es wird immer nur ein Infofenster gleichzeitig eingeblendet. Wenn ein Nutzer auf eine Markierung klickt, wird das aktuelle Infofenster geschlossen und das neue Infofenster erscheint. Hinweis: Wenn der Nutzer auf eine Markierung klickt, zu der schon ein Infofenster angezeigt wird, wird es geschlossen und noch einmal geöffnet.

Infofenster werden am Gerätebildschirm ausgerichtet und über der zugehörigen Markierung zentriert. Das Standardinfofenster enthält den Titel in Fettdruck und darunter den (optionalen) Snippet-Text.

Infofenster hinzufügen

Die einfachste Möglichkeit, ein Infofenster hinzuzufügen, ist, die Methoden title() und snippet() der entsprechenden Markierung festzulegen. Wenn diese Eigenschaften festgelegt werden, erscheint bei jedem Klick auf diese Markierung ein Infofenster.

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"));

      

Kotlin

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

      

Infofenster ein- oder ausblenden

Infofenster reagieren auf die Touch-Ereignisse des Nutzers. Sie können sie aber auch programmatisch einblenden lassen. Dazu rufen Sie showInfoWindow() für die Zielmarkierung auf. Infofenster lassen sich durch Aufrufen von hideInfoWindow() ausblenden.

Java

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

      

Kotlin

val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
)
melbourne?.showInfoWindow()

      

Du kannst auch Infofenster für einzelne Markierungscluster erstellen. Weitere Informationen findest du in der Anleitung zum Hinzufügen eines Infofensters für einzelne Markierungscluster.

Benutzerdefinierte Infofenster

Es ist außerdem möglich, Inhalt und Design von Infofenstern anzupassen. Erstelle dazu eine konkrete Implementierung der InfoWindowAdapter-Schnittstelle und rufe dann damit GoogleMap.setInfoWindowAdapter() auf. Die Schnittstelle enthält zwei Implementierungsmethoden: getInfoWindow(Marker) und getInfoContents(Marker). Über die API wird zuerst getInfoWindow(Marker) aufgerufen. Wenn null zurückgegeben wird, wird getInfoContents(Marker) aufgerufen. Wird auch hier null zurückgegeben, wird das Standardinfofenster verwendet.

Mit der ersten Methode (getInfoWindow()) kannst du eine Ansicht bereitstellen, die für das gesamte Infofenster verwendet wird. Mit der zweiten Methode (getInfoContents()) kann der Inhalt des Fensters angepasst, der Standardrahmen und -hintergrund des Infofensters jedoch beibehalten werden.

Hinweis: Das Infofenster, das dargestellt wird, ist keine Live View. Die Ansicht wird bei der Rückgabe als Bild (mit View.draw(Canvas)) gerendert. Spätere Änderungen der Ansicht wirken sich daher nicht auf das Infofenster in der Karte aus. Um das Infofenster später zu aktualisieren, z. B. nach dem Laden eines Bilds, rufst du showInfoWindow() auf. Darüber hinaus reagiert das Infofenster nicht auf typische Interaktionen für eine normale Ansicht, etwa Tippen oder Gesten. Sie können aber allgemeine Klickereignisse für das gesamte Infofenster erfassen, wie im Abschnitt unten beschrieben.

Die folgenden Bilder zeigen ein Standardinfofenster, ein Infofenster mit angepasstem Inhalt und ein Infofenster mit angepasstem Rahmen und Hintergrund.

Ereignisse im Infofenster

Das MarkerDemoActivity-Beispiel enthält Beispielcode zum Registrieren und Verarbeiten von Infofensterereignissen.

Mithilfe eines OnInfoWindowClickListener können Sie Klickereignisse für ein Infofenster erfassen. Rufen Sie GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener) auf, um diesen Listener auf der Karte festzulegen. Wenn ein Nutzer auf ein Infofenster klickt, wird onInfoWindowClick(Marker) aufgerufen und das Infofenster in der Standardhervorhebungsfarbe (grau) dargestellt.

Java

class InfoWindowActivity extends AppCompatActivity implements
    GoogleMap.OnInfoWindowClickListener,
    OnMapReadyCallback {

    @Override
    public void onMapReady(GoogleMap googleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this);
    }

    @Override
    public void onInfoWindowClick(Marker marker) {
        Toast.makeText(this, "Info window clicked",
            Toast.LENGTH_SHORT).show();
    }
}

      

Kotlin

internal inner class InfoWindowActivity : AppCompatActivity(),
    OnInfoWindowClickListener,
    OnMapReadyCallback {
    override fun onMapReady(googleMap: GoogleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this)
    }

    override fun onInfoWindowClick(marker: Marker) {
        Toast.makeText(
            this, "Info window clicked",
            Toast.LENGTH_SHORT
        ).show()
    }
}

      

Sie können auch lange Klickereignisse mit einem OnInfoWindowLongClickListener erfassen, den Sie durch Aufrufen von GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) festlegen. Dieser Listener funktioniert ähnlich wie der Klick-Listener. Er wird bei langen Klickereignissen über einen onInfoWindowClose(Marker)-Callback benachrichtigt.

Wenn Sie beim Schließen des Infofensters benachrichtigt werden möchten, müssen Sie einen OnInfoWindowCloseListener verwenden, den Sie durch Aufrufen von GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) festlegen. Du empfängst dann einen onInfoWindowClose(Marker)-Callback.

Hinweis zum Aktualisieren eines Infofensters: Das Ereignis onInfoWindowClose() wird ausgelöst, wenn der Nutzer ein Infofenster aktualisiert, indem er auf eine Markierung tippt, für die bereits ein offenes Infofenster vorhanden ist. Wenn Marker.showInfoWindow() jedoch programmatisch in einem offenen Infofenster aufgerufen wird, wird das Ereignis onInfoWindowClose() nicht ausgelöst. Die letztere Funktionsweise basiert auf der Annahme, dass du erkennst, ob das Infofenster geschlossen und wieder geöffnet wird.

Wie im vorherigen Abschnitt zu Infofenstern erwähnt, ist ein Infofenster keine Live View. Stattdessen wird die Ansicht als über die Karte gelegtes Bild gerendert. Daher werden Listener, die Sie für die Ansicht einrichten, ignoriert und Klickereignisse für unterschiedliche Bereiche der Ansicht lassen sich nicht unterscheiden. Es wird empfohlen, keine interaktiven Komponenten wie Schaltflächen, Kästchen oder Texteingabefelder in einem benutzerdefinierten Infofenster zu platzieren.