Android 09.1 für Fortgeschrittene: Google Maps

1. Willkommen

Dieses Codelab ist Teil des Schulungskurses für fortgeschrittene Android-Entwicklung, der vom Google Developers Training-Team entwickelt wurde. Sie können den Kurs am besten nutzen, wenn Sie die Codelabs der Reihe nach durcharbeiten.

Ausführliche Informationen zum Kurs finden Sie in der Übersicht über die erweiterte Android-Entwicklung.

Hinweis: In diesem Kurs werden die Begriffe „Codelab“ und „Praxisübung“ synonym verwendet.

Einführung

Wenn Sie Apps mit Google Maps entwickeln, können Sie Ihrer App Funktionen wie Satellitenbilder, leistungsstarke UI-Steuerelemente, Standortverfolgung und Standortmarkierungen hinzufügen. Sie können die Standardkarte von Google Maps mit Informationen aus Ihrem eigenen Datensatz ergänzen, z. B. mit den Standorten bekannter Angel- oder Klettergebiete. Sie können auch Spiele erstellen, die an die reale Welt gebunden sind, wie Pokémon Go.

In diesem Praktikum erstellen Sie eine Google Maps App namens Wander.

Was Sie bereits wissen sollten

Sie sollten mit Folgendem vertraut sein:

• Grundlegende Funktionen von Google Maps.
• Laufzeitberechtigungen.
• Apps in Android Studio erstellen, entwickeln und ausführen
• Fügen Sie externe Bibliotheken in Ihre build.gradle-Datei ein.

Lerninhalte

• Eine Google-Karte in Ihre App einbinden
• Verschiedene Kartentypen anzeigen
• Google Maps-Karte gestalten
• Fügen Sie Ihrer Karte Markierungen hinzu.
• Ermöglichen Sie dem Nutzer, eine Markierung auf einem POI zu platzieren.
• Aktivieren Sie die Standortermittlung.
• Aktivieren Sie Google Street View.

Aufgaben

• Rufen Sie einen API-Schlüssel über die Google API Console ab und registrieren Sie den Schlüssel für Ihre App.
• Erstellen Sie die Wander-App mit einer eingebetteten Google-Karte.
• Fügen Sie Ihrer App benutzerdefinierte Funktionen wie Markierungen, Formatierung und Standort-Tracking hinzu.
• Aktivieren Sie die Standortverfolgung und Street View in Ihrer App.

2. App-Übersicht

In dieser Übung erstellen Sie die Wander-App, eine formatierte Google-Karte. Mit der Wander App können Sie Markierungen auf Orte setzen, Ihren Standort in Echtzeit sehen und Street View-Panoramen ansehen.

3. Aufgabe 1: Projekt einrichten und API-Schlüssel abrufen

Für die Google Maps API ist wie für die Places API ein API-Schlüssel erforderlich. Um den API-Schlüssel zu erhalten, registrieren Sie Ihr Projekt in der Google API Console. Der API-Schlüssel ist an ein digitales Zertifikat gebunden, das die App mit ihrem Autor verknüpft. Weitere Informationen zur Verwendung digitaler Zertifikate und zum Signieren von Apps finden Sie unter App signieren.

In dieser Übung verwenden Sie den API-Schlüssel für das Debug-Zertifikat. Das Debugzertifikat ist von Natur aus unsicher, wie im Abschnitt Debug-Build signieren beschrieben. Für veröffentlichte Android-Apps, die die Google Maps API verwenden, ist ein zweiter API-Schlüssel erforderlich: der Schlüssel für das Release-Zertifikat. Weitere Informationen zum Abrufen eines Release-Zertifikats finden Sie unter API-Schlüssel abrufen.

Android Studio enthält eine Google Maps-Aktivitätsvorlage, mit der hilfreicher Vorlagencode generiert wird. Der Vorlagencode enthält eine Datei google_maps_api.xml mit einem Link, der das Abrufen eines API-Schlüssels vereinfacht.

Hinweis:Wenn Sie die Aktivität ohne Verwendung der Vorlage erstellen möchten, folgen Sie der Anleitung im API-Schlüssel-Leitfaden, um den API-Schlüssel ohne Verwendung des Links in der Vorlage zu erhalten.

1.1 Wander-Projekt mit der Maps-Vorlage erstellen

1. Erstellen Sie ein neues Android Studio-Projekt.
2. Geben Sie der neuen App den Namen „Wander“. Übernehmen Sie die Standardeinstellungen, bis Sie zur Seite Aktivität hinzufügen gelangen.
3. Wählen Sie die Vorlage Google Maps-Aktivitäten aus.
4. Behalten Sie die Standardwerte für Name der Aktivität und Name des Layouts bei.
5. Ändern Sie den Titel in „Wander“ und klicken Sie auf Fertigstellen.

Android Studio erstellt mehrere zusätzliche Dateien, die mit Karten zusammenhängen:

google_maps_api**.xml**

In dieser Konfigurationsdatei speichern Sie Ihren API-Schlüssel. Mit der Vorlage werden zwei google_maps_api.xml-Dateien generiert: eine für das Debugging und eine für die Veröffentlichung. Die Datei für den API-Schlüssel für das Debug-Zertifikat befindet sich unter src/debug/res/values. Die Datei für den API-Schlüssel für das Releasezertifikat befindet sich in src/release/res/values. In dieser Übung verwenden wir nur das Debug-Zertifikat.

activity_maps.xml

Diese Layoutdatei enthält ein einzelnes Fragment, das den gesamten Bildschirm ausfüllt. Die Klasse SupportMapFragment ist eine abgeleitete Klasse der Klasse Fragment. Sie können SupportMapFragment in eine Layoutdatei einfügen, indem Sie in einem beliebigen ViewGroup ein <fragment>-Tag mit einem zusätzlichen Attribut verwenden:

android:name="com.google.android.gms.maps.SupportMapFragment"

MapsActivity.java

In der Datei MapsActivity.java wird die Klasse SupportMapFragment instanziiert und die Methode getMapAsync() der Klasse verwendet, um die Google-Karte vorzubereiten. Die Aktivität, die SupportMapFragment enthält, muss die Schnittstelle OnMapReadyCallback und die onMapReady()-Methode dieser Schnittstelle implementieren. Die Methode getMapAsync() gibt ein GoogleMap-Objekt zurück, das angibt, dass die Karte geladen wurde.

Wenn Sie die App jetzt ausführen, kann die Karte nicht geladen werden. Wenn Sie in den Logs eine Meldung sehen, dass Ihr API-Schlüssel nicht richtig eingerichtet ist, Im nächsten Schritt erhalten Sie den API-Schlüssel, damit in der App die Karte angezeigt wird.

Hinweis: Wenn Sie die Wander App auf einem Emulator testen, verwenden Sie ein System-Image, das Google-APIs und Google Play enthält. Wählen Sie in der Liste der virtuellen Geräte ein Bild aus, in dessen Spalte Ziel Google Play angezeigt wird.

1.2 API-Schlüssel abrufen

1. Öffnen Sie die Debug-Version der Datei google_maps_api.xml.

Die Datei enthält einen Kommentar mit einer langen URL. Die Parameter der URL enthalten spezifische Informationen zu Ihrer App.

2. Kopieren Sie die URL und fügen Sie sie in einen Browser ein.
3. Folgen Sie der Anleitung, um ein Projekt in der Google API Console zu erstellen. Aufgrund der Parameter in der angegebenen URL wird die Google Maps Android API in der API Console automatisch aktiviert.
4. Erstellen Sie einen API-Schlüssel und klicken Sie auf Schlüssel einschränken, um die Verwendung des Schlüssels auf Android-Apps zu beschränken. Der generierte API-Schlüssel sollte mit AIza beginnen.
5. Fügen Sie in der Datei google_maps_api.xml den Schlüssel in den String google_maps_key ein, an der Stelle, an der YOUR_KEY_HERE steht.
6. Führen Sie die App aus. In Ihrer Aktivität ist eine Karte eingebettet, auf der Sydney, Australien, mit einer Markierung versehen ist. Die Markierung für Sydney ist Teil der Vorlage und wird später geändert.

Hinweis:Es kann bis zu 5 Minuten dauern, bis der API-Schlüssel wirksam wird.

4. Aufgabe 2: Kartentypen und Markierungen hinzufügen

Google Maps bietet verschiedene Kartentypen: „Normal“, „Hybrid“, „Satellit“, „Gelände“ und „Keine“. In dieser Aufgabe fügen Sie eine App-Leiste mit einem Optionsmenü hinzu, über das der Nutzer den Kartentyp ändern kann. Sie verschieben den Startpunkt der Karte an Ihren eigenen Wohnort. Als Nächstes fügen Sie Unterstützung für Markierungen hinzu, mit denen einzelne Orte auf einer Karte gekennzeichnet werden können und die ein Label enthalten können.

2.1 Kartentypen hinzufügen

Welche Art von Karte der Nutzer benötigt, hängt davon ab, welche Informationen er benötigt. Wenn Sie Karten zur Navigation in Ihrem Auto verwenden, ist es hilfreich, Straßennamen deutlich zu sehen. Beim Wandern interessiert Sie wahrscheinlich eher, wie viele Höhenmeter Sie zurücklegen müssen, um den Gipfel zu erreichen. In diesem Schritt fügen Sie eine App-Leiste mit einem Optionsmenü hinzu, über das der Nutzer den Kartentyp ändern kann.

1. Wenn Sie eine neue XML-Datei für das Menü erstellen möchten, klicken Sie mit der rechten Maustaste auf das Verzeichnis res und wählen Sie Neu > Android-Ressourcendatei aus.
2. Geben Sie im Dialogfeld map_options als Dateinamen ein. Wählen Sie Menü als Ressourcentyp aus. Klicken Sie auf OK.
3. Ersetzen Sie den Code in der neuen Datei durch den folgenden Code, um die Kartenoptionen zu erstellen. Der Kartentyp „none“ wird ausgelassen, da er dazu führt, dass keine Karte angezeigt wird.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never"/>
   <item android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never"/>
   <item android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never"/>
   <item android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never"/>
</menu>

4. Erstellen Sie String-Ressourcen für die title-Attribute.
5. Ändern Sie in der Datei MapsActivity die Klasse so, dass sie die Klasse AppCompatActivity anstelle der Klasse FragmentActivity erweitert. Wenn Sie AppCompatActivity verwenden, wird die App-Leiste und damit das Menü angezeigt.
6. Überschreiben Sie in MapsActivity die Methode onCreateOptionsMenu() und blähen Sie die Datei map_options auf:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
   MenuInflater inflater = getMenuInflater();
   inflater.inflate(R.menu.map_options, menu);
   return true;
}

7. Um den Kartentyp zu ändern, verwenden Sie die Methode setMapType() für das Objekt GoogleMap und übergeben Sie eine der Kartentypkonstanten.

Überschreiben Sie die Methode onOptionsItemSelected(). Fügen Sie den folgenden Code ein, um den Kartentyp zu ändern, wenn der Nutzer eine der Menüoptionen auswählt:

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
       // Change the map type based on the user's selection.
       switch (item.getItemId()) {
           case R.id.normal_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
               return true;
           case R.id.hybrid_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
               return true;
           case R.id.satellite_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
               return true;
           case R.id.terrain_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
               return true;
           default:
               return super.onOptionsItemSelected(item);
       }
    }

8. Führen Sie die App aus. Verwenden Sie das Menü in der App-Leiste, um den Kartentyp zu ändern. Beachten Sie, wie sich die Darstellung der Karte ändert.

2.2 Standardkartenposition verschieben

Standardmäßig enthält der onMapReady()-Callback Code, mit dem eine Markierung in Sydney, Australien, platziert wird, wo Google Maps entwickelt wurde. Der Standard-Callback animiert die Karte auch so, dass sie auf Sydney geschwenkt wird. In diesem Schritt wird die Karte auf Ihren Wohnort zentriert, ohne dass eine Markierung gesetzt wird. Anschließend wird auf die von Ihnen angegebene Zoomstufe gezoomt.

1. Entfernen Sie in der Methode onMapReady() den Code, mit dem die Markierung in Sydney platziert und die Kamera bewegt wird.
2. Rufen Sie in Ihrem Browser www.google.com/maps auf und suchen Sie nach Ihrer Privatadresse.
3. Klicken Sie mit der rechten Maustaste auf den Ort und wählen Sie Was ist hier? aus.

Unten auf dem Bildschirm wird ein kleines Fenster mit Standortinformationen wie Breitengrad und Längengrad eingeblendet.

4. Erstellen Sie ein neues LatLng-Objekt mit dem Namen home. Verwenden Sie im LatLng-Objekt die Koordinaten, die Sie in Google Maps im Browser gefunden haben.
5. Erstellen Sie eine float-Variable mit dem Namen zoom und legen Sie die gewünschte anfängliche Zoomstufe fest. Die folgende Liste gibt Ihnen einen Eindruck davon, welche Detailebene bei den einzelnen Zoomstufen angezeigt wird:

• 1: Welt
• 5: Landmasse/Kontinent
• 10: Stadt
• 15: Straßen
• 20: Gebäude

6. Erstellen Sie ein CameraUpdate-Objekt mit CameraUpdateFactory.newLatLngZoom() und übergeben Sie Ihr LatLng-Objekt und die zoom-Variable. Schwenken und zoomen Sie die Kamera, indem Sie moveCamera() für das GoogleMap-Objekt aufrufen und das neue CameraUpdate-Objekt übergeben:

mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(home, zoom));

7. Führen Sie die App aus. Die Karte sollte zu Ihrem Zuhause schwenken und auf die gewünschte Ebene zoomen.

2.3 Kartenmarkierungen hinzufügen

In Google Maps kann ein Ort mit einer Markierung hervorgehoben werden, die Sie mit der Klasse Marker erstellen. Für die Standardmarkierung wird das Google Maps-Standardsymbol verwendet:

Sie können Markierungen erweitern, um Kontextinformationen in Infofenstern anzuzeigen.

In diesem Schritt fügen Sie eine Markierung hinzu, wenn der Nutzer einen Ort auf der Karte berührt und hält. Anschließend fügen Sie ein InfoWindow hinzu, in dem die Koordinaten der Markierung angezeigt werden, wenn auf die Markierung getippt wird.

1. Erstellen Sie in MapsActivity einen Methoden-Stub namens setMapLongClick(), der ein final GoogleMap als Argument verwendet und void zurückgibt:

private void setMapLongClick(final GoogleMap map) {}

2. Verwenden Sie die Methode setOnMapLongClickListener() des Objekts GoogleMap, um eine Markierung an der Stelle zu platzieren, an der der Nutzer tippt und hält. Übergeben Sie eine neue Instanz von OnMapLongClickListener, die die Methode onMapLongClick() überschreibt. Das eingehende Argument ist ein LatLng-Objekt, das die Koordinaten des Standorts enthält, auf den der Nutzer getippt hat:

private void setMapLongClick(final GoogleMap map) {
   map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
       @Override
       public void onMapLongClick(LatLng latLng) {
       }
   });
}

3. Rufen Sie in onMapLongClick() die Methode addMarker() auf. Übergeben Sie ein neues MarkerOptions-Objekt, dessen Position auf den übergebenen LatLng-Wert festgelegt ist:

map.addMarker(new MarkerOptions().position(latLng));

4. Rufen Sie setMapLongClick() am Ende der Methode onMapReady() auf. Übergeben Sie einen Wert für mMap.
5. Starten Sie die App. Halten Sie die Karte gedrückt, um eine Markierung an einem Ort zu platzieren.
6. Tippen Sie auf die Markierung, um sie auf dem Bildschirm zu zentrieren.

Navigationsschaltflächen werden unten links auf dem Bildschirm angezeigt. Der Nutzer kann damit die Google Maps App verwenden, um zur markierten Position zu navigieren.

So fügen Sie der Markierung ein Infofenster hinzu:

1. Legen Sie im Objekt MarkerOptions das Feld title und das Feld snippet fest.
2. Legen Sie in onMapLongClick() das Feld title auf „Markierung“ fest. Legen Sie das Feld snippet in der Methode addMarker() auf die Standortkoordinaten fest.

map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
   @Override
   public void onMapLongClick(LatLng latLng) {
       String snippet = String.format(Locale.getDefault(),
               "Lat: %1$.5f, Long: %2$.5f",
               latLng.latitude,
               latLng.longitude);

       map.addMarker(new MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet));
   }
});

3. Starten Sie die App. Halten Sie die Karte gedrückt, um eine Standortmarkierung zu setzen. Tippen Sie auf die Markierung, um das Infofenster aufzurufen.

2.4 POI-Listener hinzufügen

Standardmäßig werden Points of Interest (POIs) zusammen mit den entsprechenden Symbolen auf der Karte dargestellt. POIs sind beispielsweise Parks, Schulen und Behördengebäude. Wenn der Kartentyp auf normal festgelegt ist, werden auch Unternehmens-POIs auf der Karte angezeigt. Unternehmens-POIs sind beispielsweise Geschäfte, Restaurants und Hotels.

In diesem Schritt fügen Sie der Karte ein GoogleMap.OnPoiClickListener hinzu. Dieser Click-Listener platziert sofort eine Markierung auf der Karte, anstatt auf ein Berühren und Halten zu warten. Der Click-Listener zeigt auch das Infofenster mit dem Namen des POI an.

1. Erstellen Sie in MapsActivity einen Methoden-Stub namens setPoiClick(), der ein final GoogleMap als Argument akzeptiert und void zurückgibt:

private void setPoiClick(final GoogleMap map) {}

2. Legen Sie in der Methode setPoiClick() einen OnPoiClickListener für das übergebene GoogleMap fest:

map.setOnPoiClickListener(new GoogleMap.OnPoiClickListener() {
   @Override
   public void onPoiClick(PointOfInterest poi) {
   }
});

3. Platzieren Sie in der onPoiClick()-Methode eine Markierung am POI-Standort. Legen Sie den Titel auf den Namen des POI fest. Speichern Sie das Ergebnis in einer Variablen namens poiMarker.

public void onPoiClick(PointOfInterest poi) {
   Marker poiMarker = mMap.addMarker(new MarkerOptions()
       .position(poi.latLng)
       .title(poi.name);
}

4. Rufen Sie showInfoWindow() für poiMarker auf, um das Infofenster sofort anzuzeigen.

poiMarker.showInfoWindow();

5. Rufen Sie setPoiClick() am Ende von onMapReady() auf. Übergeben Sie einen Wert für mMap.
6. Führen Sie Ihre App aus und suchen Sie nach einem POI, z. B. einem Park. Tippen Sie auf den POI, um eine Markierung darauf zu platzieren und den Namen des POI in einem Infofenster anzuzeigen.

5. Aufgabe 3: Karte gestalten

Sie können Google Maps auf vielfältige Weise anpassen und Ihrer Karte so ein einzigartiges Erscheinungsbild verleihen.

Sie können ein MapFragment-Objekt mit den verfügbaren XML-Attributen anpassen, wie Sie es auch bei anderen Fragmenten tun würden. In diesem Schritt passen Sie jedoch das Erscheinungsbild des Inhalts des MapFragment mit Methoden für das GoogleMap-Objekt an. Mit dem Styling Wizard können Sie Ihrer Karte einen Stil hinzufügen und Ihre Markierungen anpassen. Außerdem fügen Sie Ihrem Zuhause ein GroundOverlay hinzu, das mit der Karte skaliert und gedreht wird.

3.1 Karte einen Stil hinzufügen

Wenn Sie einen benutzerdefinierten Stil für Ihre Karte erstellen möchten, generieren Sie eine JSON-Datei, in der angegeben wird, wie die Elemente auf der Karte dargestellt werden.Sie müssen diese JSON-Datei nicht manuell erstellen: Google stellt den Styling Wizard zur Verfügung, der die JSON-Datei für Sie generiert, nachdem Sie Ihre Karte visuell gestaltet haben. In diesem Praktikum gestalten Sie die Karte für den „Nachtmodus“. Das bedeutet, dass die Karte für die Verwendung bei Nacht dunkle Farben und einen geringen Kontrast verwendet.

Hinweis:Die Formatierung gilt nur für Karten, für die der Kartentyp normal verwendet wird.

1. Rufen Sie in Ihrem Browser https://mapstyle.withgoogle.com/ auf.
2. Wählen Sie Stil erstellen aus.
3. Wählen Sie das Design Nacht aus.
4. Klicken Sie unten im Menü auf Weitere Optionen.
5. Wählen Sie unten in der Liste Elementtyp die Option Wasser > Füllung aus. Ändern Sie die Farbe des Wassers in ein dunkles Blau (z. B. #160064).
6. Klicken Sie auf Fertig. Kopieren Sie den JSON-Code aus dem angezeigten Pop-up-Fenster.
7. Erstellen Sie in Android Studio im Verzeichnis res ein Ressourcenverzeichnis mit dem Namen raw. Erstellen Sie im Ordner res/raw eine Datei mit dem Namen map_style.json.
8. Fügen Sie den JSON-Code in die neue Ressourcendatei ein.
9. Rufen Sie setMapStyle() für das GoogleMap-Objekt auf, um den JSON-Stil für die Karte festzulegen. Übergeben Sie ein MapStyleOptions-Objekt, um die JSON-Datei zu laden. Die Methode setMapStyle() gibt einen booleschen Wert zurück, der angibt, ob das Styling erfolgreich war. Wenn die Datei nicht geladen werden kann, wird von der Methode eine Resources.NotFoundException ausgelöst.

Kopieren Sie den folgenden Code in die onMapReady()-Methode, um die Karte zu gestalten. Möglicherweise müssen Sie einen TAG-String für Ihre Log-Anweisungen erstellen:

     try {
        // Customize the styling of the base map using a JSON object defined
        // in a raw resource file.
        boolean success = googleMap.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
                   this, R.raw.map_style));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
     } catch (Resources.NotFoundException e) {
        Log.e(TAG, "Can't find style. Error: ", e);
     }

10. Führen Sie Ihre App aus. Der neue Stil sollte sichtbar sein, wenn sich die Karte im Modus normal befindet.

3.2 Markierung gestalten

Sie können Ihre Karte weiter personalisieren, indem Sie die Kartenmarkierungen gestalten. In diesem Schritt ändern Sie die roten Standardmarkierungen, damit sie dem Farbschema des Nachtmodus entsprechen.

1. Fügen Sie in der Methode onMapLongClick() dem Konstruktor MarkerOptions() die folgende Codezeile hinzu, um die Standardmarkierung zu verwenden, aber die Farbe in Blau zu ändern:

.icon(BitmapDescriptorFactory.defaultMarker
       (BitmapDescriptorFactory.HUE_BLUE))

2. Führen Sie die App aus. Die platzierten Markierungen sind jetzt blau schattiert, was besser zum Nachtmodus der App passt.

POI-Markierungen sind weiterhin rot, da Sie der onPoiClick()-Methode kein Styling hinzugefügt haben.

3.3 Overlay hinzufügen

Eine Möglichkeit, die Google-Karte anzupassen, besteht darin, darauf zu zeichnen. Diese Technik ist nützlich, wenn Sie einen bestimmten Ortstyp hervorheben möchten, z. B. beliebte Angelplätze. Es werden drei Arten von Overlays unterstützt:

• Formen: Sie können der Karte Polylinien, Polygone und Kreise hinzufügen.
• TileOverlay-Objekte: Ein Kachel-Overlay definiert eine Reihe von Bildern, die über den Kacheln der Basiskarte hinzugefügt werden. Kachel-Overlays sind hilfreich, um der Karte umfassendes Bildmaterial hinzuzufügen. Ein typisches Kachel-Overlay deckt ein großes geografisches Gebiet ab.
• GroundOverlay-Objekte: Ein Boden-Overlay ist ein Bild, das auf einer Karte fixiert ist. Im Unterschied zu Markierungen sind Boden-Overlays an der Erdoberfläche und nicht am Bildschirm ausgerichtet. Wenn Sie die Karte drehen, neigen oder zoomen, ändert sich die Ausrichtung des Bildes. Boden-Overlays sind nützlich, um ein einzelnes Bild an einem Punkt der Karte zu fixieren.

In diesem Schritt fügen Sie Ihrer Wohnadresse ein Boden-Overlay in Form eines Android hinzu.

1. Laden Sie dieses Android-Image herunter und speichern Sie es im Ordner res/drawable.
2. Erstellen Sie in onMapReady() nach dem Aufruf zum Verschieben der Kamera in die Startposition ein GroundOverlayOptions-Objekt. Weisen Sie das Objekt einer Variablen mit der Bezeichnung homeOverlay zu:

GroundOverlayOptions homeOverlay = new GroundOverlayOptions();

3. Verwenden Sie die Methode BitmapDescriptorFactory.fromResource(), um ein BitmapDescriptor-Objekt aus dem oben genannten Bild zu erstellen. Übergeben Sie das Objekt an die Methode image() des GroundOverlayOptions-Objekts:

GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.android));

4. Legen Sie die position-Eigenschaft für das GroundOverlayOptions-Objekt fest, indem Sie die position()-Methode aufrufen. Übergeben Sie das home-LatLng-Objekt und einen float für die Breite des gewünschten Overlays in Metern. In diesem Beispiel funktioniert eine Breite von 100 m gut:

GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
     .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
       .position(home, 100);

5. Rufen Sie addGroundOverlay() für das GoogleMap-Objekt auf. Übergeben Sie Ihr GroundOverlayOptions-Objekt:

mMap.addGroundOverlay(homeOverlay);

6. Führen Sie die App aus. Zoomen Sie auf Ihren Wohnort. Das Android-Bild wird als Overlay angezeigt.

6. Aufgabe 4: Standortverfolgung und Street View aktivieren

Nutzer verwenden Google Maps häufig, um ihren aktuellen Standort zu sehen. Sie können den Gerätestandort mit der Location Services API abrufen. Wenn Sie den Gerätestandort auf Ihrer Karte anzeigen möchten, ohne Location-Daten weiter zu verwenden, können Sie die Standortdatenebene verwenden.

Durch die Ebene mit Standortdaten wird rechts oben auf der Karte die Schaltfläche Mein Standort hinzugefügt. Wenn der Nutzer auf die Schaltfläche tippt, wird die Karte auf den Standort des Geräts zentriert. Der Standort wird als blauer Punkt angezeigt, wenn das Gerät sich nicht bewegt, und als blauer Navigationspfeil, wenn das Gerät in Bewegung ist.

Mit Google Street View können Sie zusätzliche Informationen zu einem Ort bereitstellen. Street View ist ein navigierbares Panoramabild eines bestimmten Orts.

In dieser Aufgabe aktivieren Sie die Ebene mit Standortdaten und Street View, sodass die Karte in den Street View-Modus wechselt, wenn der Nutzer auf das Infofenster für die POI-Markierung tippt.

4.1 Standortermittlung aktivieren

Um die Standortverfolgung in Google Maps zu aktivieren, ist nur eine Codezeile erforderlich. Sie müssen jedoch dafür sorgen, dass der Nutzer Standortberechtigungen erteilt hat (mit dem Laufzeitberechtigungsmodell).

In diesem Schritt fordern Sie Berechtigungen zur Standortermittlung an und aktivieren die Standortermittlung.

1. Prüfen Sie in der Datei AndroidManifest.xml, ob die Berechtigung FINE_LOCATION bereits vorhanden ist. Android Studio hat diese Berechtigung eingefügt, als Sie die Google Maps-Vorlage ausgewählt haben.
2. Wenn Sie die Standortverfolgung in Ihrer App aktivieren möchten, erstellen Sie in MapsActivity eine Methode namens enableMyLocation(), die keine Argumente akzeptiert und nichts zurückgibt.
3. Definieren Sie die Methode enableMyLocation(). Prüfen Sie, ob Sie die Berechtigung ACCESS_FINE_LOCATION haben. Wenn die Berechtigung erteilt wurde, aktivieren Sie die Standortebene. Andernfalls fordern Sie die Berechtigung an:

private void enableMyLocation() {
   if (ContextCompat.checkSelfPermission(this,
           Manifest.permission.ACCESS_FINE_LOCATION)
           == PackageManager.PERMISSION_GRANTED) {
       mMap.setMyLocationEnabled(true);
   } else {
       ActivityCompat.requestPermissions(this, new String[]
                       {Manifest.permission.ACCESS_FINE_LOCATION},
               REQUEST_LOCATION_PERMISSION);
   }
}

4. Rufen Sie enableMyLocation() über den onMapReady()-Callback auf, um die Standortebene zu aktivieren.
5. Überschreiben Sie die Methode onRequestPermissionsResult(). Wenn die Berechtigung erteilt wurde, rufen Sie enableMyLocation() auf:

@Override
public void onRequestPermissionsResult(int requestCode,
       @NonNull String[] permissions,
       @NonNull int[] grantResults) {
   // Check if location permissions are granted and if so enable the
   // location data layer.
   switch (requestCode) {
       case REQUEST_LOCATION_PERMISSION:
           if (grantResults.length > 0
                   && grantResults[0]
                   == PackageManager.PERMISSION_GRANTED) {
               enableMyLocation();
               break;
           }
   }
}

6. Führen Sie die App aus. Rechts oben wird jetzt die Schaltfläche Mein Standort angezeigt, über die der aktuelle Standort des Geräts aufgerufen werden kann.

Hinweis: Wenn Sie die App auf einem Emulator ausführen, ist der Standort möglicherweise nicht verfügbar. Wenn Sie in den Emulatoreinstellungen keinen Standort festgelegt haben, ist die Schaltfläche „Standort“ nicht verfügbar.

4.2 Street View aktivieren

Google Maps bietet Street View, eine Panoramaansicht eines Orts mit Steuerelementen für die Navigation auf einem bestimmten Pfad. Street View ist nicht weltweit verfügbar.

In diesem Schritt aktivieren Sie ein Street View-Panorama, das aktiviert wird, wenn der Nutzer auf das Infofenster eines POI tippt. Dazu sind zwei Schritte erforderlich:

1. POI-Markierungen von anderen Markierungen unterscheiden, da die Funktionen Ihrer App nur für POI-Markierungen funktionieren sollen. So können Sie Street View starten, wenn der Nutzer auf ein POI-Infofenster tippt, aber nicht, wenn er auf eine andere Art von Markierung tippt.

Die Klasse Marker enthält die Methode setTag(), mit der Sie Daten anhängen können. Die Daten können alles sein, was sich aus Object ergibt. Sie legen ein Tag für die Markierungen fest, die erstellt werden, wenn Nutzer auf POIs klicken.

2. Wenn der Nutzer in einem OnInfoWindowClickListener auf ein getaggtes Infofenster tippt, ersetzen Sie MapFragment durch StreetViewPanoramaFragment. Im folgenden Code werden SupportMapFragment und SupportStreetViewPanoramaFragment verwendet, um Android-Versionen unter API 12 zu unterstützen.

Wenn sich eines der Fragmente zur Laufzeit ändert, müssen Sie es in der enthaltenden Activity-Klasse und nicht statisch in XML hinzufügen.

POI-Markierung taggen

1. Rufen Sie im onPoiClick()-Callback setTag() für poiMarker auf. Einen beliebigen String übergeben:

poiMarker.setTag("poi");

Statisches SupportMapFragment durch eine Laufzeitinstanz ersetzen

1. Öffnen Sie activity_maps.xml und ändern Sie das Element in ein Frame-Layout, das als Container für Ihre Fragmente dient:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/fragment_container"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

2. Entfernen Sie in onCreate() in MapsActivity den Code, der die SupportMapFragment anhand der ID findet, da es in der XML-Datei keine statische SupportMapFragment mehr gibt. Erstellen Sie stattdessen eine neue Laufzeitinstanz von SupportMapFragment, indem Sie SupportMapFragment.newInstance() aufrufen:

SupportMapFragment mapFragment = SupportMapFragment.newInstance();

3. Fügen Sie das Fragment dem FrameLayout mit einer Fragmenttransaktion mit dem FragmentManager hinzu:

getSupportFragmentManager().beginTransaction()
       .add(R.id.fragment_container, mapFragment).commit();

4. Behalten Sie die Codezeile bei, die das asynchrone Laden der Karte auslöst:

mapFragment.getMapAsync(this);

OnInfoWindowClickListener festlegen und Marker-Tag prüfen

1. Erstellen Sie in MapsActivity einen Methoden-Stub namens setInfoWindowClickToPanorama(), der GoogleMap als Argument verwendet und void zurückgibt:

private void setInfoWindowClickToPanorama(GoogleMap map) {}

2. Legen Sie für GoogleMap eine OnInfoWindowClickListener fest:

map.setOnInfoWindowClickListener(
       new GoogleMap.OnInfoWindowClickListener() {
           @Override
           public void onInfoWindowClick(Marker marker) {
           }
       });

3. Prüfen Sie in der onInfoWindowClick()-Methode, ob die Markierung das String-Tag enthält, das Sie in der onPoiClick()-Methode festgelegt haben:

if (marker.getTag() == "poi") {}

SupportMapFragment durch ein SupportStreetViewPanoramaFragment ersetzen

1. Wenn die Markierung das Tag enthält, geben Sie den Ort für das Street View-Panorama mit einem StreetViewPanoramaOptions-Objekt an. Legen Sie die position-Eigenschaft des Objekts auf die Position der übergebenen Markierung fest:

StreetViewPanoramaOptions options =
       new StreetViewPanoramaOptions().position(
               marker.getPosition());

2. Erstellen Sie eine neue Instanz von SupportStreetViewPanoramaFragment und übergeben Sie das erstellte options-Objekt:

SupportStreetViewPanoramaFragment streetViewFragment
       = SupportStreetViewPanoramaFragment
       .newInstance(options);

3. Starten Sie eine Fragmenttransaktion. Ersetzen Sie den Inhalt des Fragment-Containers durch das neue Fragment streetViewFragment. Fügen Sie die Transaktion dem Backstack hinzu, damit durch Drücken der Zurück-Taste zur SupportMapFragment zurückgekehrt wird und die App nicht beendet wird:

getSupportFragmentManager().beginTransaction()
       .replace(R.id.fragment_container,
               streetViewFragment)
       .addToBackStack(null).commit();

Hinweis:Das Argument für die addToBackStack()-Methode ist ein optionaler Name. Der Name wird verwendet, um den Backstack-Zustand zu bearbeiten. In diesem Fall wird der Name nicht noch einmal verwendet. Sie können also null übergeben.

4. Rufen Sie setInfoWindowClickToPanorama(mMap) in onMapReady() nach dem Anruf bei setPoiClick(). auf.
5. Starten Sie die App. Zoomen Sie in eine Stadt mit Street View-Abdeckung, z. B. Mountain View (Sitz des Google-Hauptquartiers), und suchen Sie nach einem POI, z. B. einem Park. Tippen Sie auf den POI, um eine Markierung zu setzen und das Infofenster aufzurufen. Tippen Sie auf das Infofenster, um den Street View-Modus für den Standort der Markierung aufzurufen. Drücke die Zurück-Taste, um zum Kartenausschnitt zurückzukehren.

7. Lösungscode

Wander-Lösungscode.

8. Coding-Herausforderung

Hinweis:Alle Programmieraufgaben sind optional.

Herausforderung:Wenn Sie auf das Infofenster für einen POI an einem Ort tippen, an dem es keine Street View-Abdeckung gibt, sehen Sie einen schwarzen Bildschirm.

• Wenn Sie prüfen möchten, ob Street View in einem Gebiet verfügbar ist, implementieren Sie den OnStreetViewPanomaraReady-Callback in Kombination mit StreetViewPanorama.OnStreetViewPanoramaChangeListener.
• Wenn Street View in einem ausgewählten Bereich nicht verfügbar ist, kehren Sie zum Kartenausschnitt zurück und zeigen Sie einen Fehler an.

9. Zusammenfassung

• Wenn Sie die Maps API verwenden möchten, benötigen Sie einen API-Schlüssel aus der Google API Console.
• Wenn Sie in Android Studio die Google Maps Activity-Vorlage verwenden, wird ein Activity mit einem einzelnen SupportMapFragment im Layout der App generiert. Die Vorlage fügt dem App-Manifest auch die ACCESS_FINE_PERMISSION hinzu, implementiert die OnMapReadyCallback in Ihrer Aktivität und überschreibt die erforderliche onMapReady()-Methode.

Wenn Sie den Kartentyp eines GoogleMap zur Laufzeit ändern möchten, verwenden Sie die Methode GoogleMap.setMapType(). Eine Google-Karte kann einen der folgenden Kartentypen haben:

• Normal: Typische Straßenkarte. Straßen, einige von Menschen geschaffene Merkmale und wichtige Landschaftsmerkmale wie Flüsse werden angezeigt. Die Straßen und sonstigen Merkmale sind beschriftet.
• Hybrid: Enthält Satellitenfotodaten mit zusätzlichen Straßenkarten. Die Straßen und sonstigen Merkmale sind beschriftet.
• Satellit: Fotodaten. Straßen und sonstige Merkmale sind nicht beschriftet.
• Gelände: Topografische Daten. Die Karte enthält Farben, Höhenlinien und Labels sowie perspektivische Schattierungen. Außerdem werden einige Straßen und Labels dargestellt.
• Keine**: Keine Karte.

Über Google Maps:

• Eine Markierung ist ein Indikator für einen bestimmten geografischen Standort.
• Wenn auf die Markierung getippt wird, wird standardmäßig ein Infofenster mit Informationen zum Ort eingeblendet.
• Standardmäßig werden Points of Interest (POIs) zusammen mit ihren Icons auf der Karte dargestellt. POIs sind beispielsweise Parks, Schulen und Behördengebäude.
• Darüber hinaus werden Unternehmens-POIs (Geschäfte, Restaurants, Hotels usw.) standardmäßig auf der Karte angezeigt, wenn der Kartentyp normal ist.
• Sie können Klicks auf POIs mit OnPoiClickListener erfassen.
• Mit dem Styling-Assistenten können Sie die Darstellung fast aller Elemente einer Google-Karte ändern. Mit dem Styling Wizard wird eine JSON-Datei generiert, die Sie mit der Methode setMapStyle() an die Google-Karte übergeben.
• Sie können die Markierungen anpassen, indem Sie die Standardfarbe ändern oder das Standardmarkierungssymbol durch ein benutzerdefiniertes Bild ersetzen.

Weitere wichtige Informationen:

• Mit einem Boden-Overlay können Sie ein Bild an einem geografischen Ort fixieren.
• Verwenden Sie ein GroundOverlayOptions-Objekt, um das Bild, die Größe des Bildes in Metern und die Position des Bildes anzugeben. Übergeben Sie dieses Objekt an die Methode GoogleMap.addGroundOverlay(), um das Overlay auf der Karte zu platzieren.
• Sofern Ihre App die Berechtigung ACCESS_FINE_LOCATION hat, können Sie die Standortverfolgung mit der Methode mMap.setMyLocationEnabled(true) aktivieren.
• Google Street View bietet 360-Grad-Panoramaansichten für bestimmte Straßen in seinem Abdeckungsbereich.
• Verwenden Sie die Methode StreetViewPanoramaFragment.newInstance(), um ein neues Street View-Fragment zu erstellen.
• Verwenden Sie ein StreetViewPanoramaOptions-Objekt, um die Optionen für die Ansicht anzugeben. Übergeben Sie das Objekt an die Methode newInstance().

10. Weitere Informationen

Die zugehörige Konzeptdokumentation finden Sie unter 9.1: Google Maps API.

Android-Entwicklerdokumentation:

• Erste Schritte mit der Google Maps Android API
• Karte mit einer Markierung hinzufügen
• Kartenobjekte
• Karte mit benutzerdefinierten Stilen hinzufügen
• Street View
• Boden-Overlays

Referenzdokumentation:

• GoogleMap
• SupportMapFragment
• SupportStreetViewPanoramaFragment

11. Aufgaben

In diesem Abschnitt werden mögliche Hausaufgaben für Schüler und Studenten aufgeführt, die dieses Codelab im Rahmen eines Kurses durcharbeiten. Es liegt in der Verantwortung des Kursleiters, Folgendes zu tun:

• Weisen Sie bei Bedarf Aufgaben zu.
• Teilen Sie den Schülern/Studenten mit, wie sie Hausaufgaben abgeben können.
• Benoten Sie die Hausaufgaben.

Lehrkräfte können diese Vorschläge nach Belieben nutzen und auch andere Hausaufgaben zuweisen, die sie für angemessen halten.

Wenn Sie dieses Codelab selbst durcharbeiten, können Sie Ihr Wissen mit diesen Hausaufgaben testen.

App erstellen und ausführen

1. Erstellen Sie eine neue App mit der Google Maps-Aktivitätsvorlage. Dadurch wird Google Maps beim Starten der App geladen.
2. Wenn die Google-Karte geladen ist, bewegen Sie die Kamera zum Standort Ihrer Schule, Ihres Zuhauses oder eines anderen für Sie wichtigen Ortes.
3. Fügen Sie der Karte zwei Markierungen hinzu, eine für den Standort Ihrer Bildungseinrichtung und eine für Ihren Wohnort oder einen anderen wichtigen Ort.
4. Sie können die Markierungssymbole anpassen, indem Sie die Standardfarbe ändern oder das Standardmarkierungssymbol durch ein benutzerdefiniertes Bild ersetzen.

Hinweis:Weitere Informationen finden Sie in der Dokumentation zu onMapReady (GoogleMap googleMap).

Beantworten Sie diese Fragen

Frage 1

Welche Methode wird aufgerufen, wenn die Karte geladen und in der App verwendet werden kann?

• onMapReady ( GoogleMap googleMap)
• onMapLoaded ( GoogleMap googleMap)
• onMapCreate ( GoogleMap googleMap)
• onMapInitialize ( GoogleMap googleMap)

Frage 2

Welche Android-Komponenten können Sie verwenden, um Google Maps in Ihre App einzubinden?

• MapView und MapFragment
• MapFragment und MapActivity
• MapView und MapActivity
• Nur MapFragment

Frage 3

Welche Arten von Karten bietet die Google Maps Android API?

• Normal, Hybrid, Gelände, Satellit und Straßenkarte
• „Normal“, „Hybrid“, „Gelände“, „Satellit“ und „Keine“
• Hybrid, Gelände, Satellit, Straßenkarte und „Keine“
• Normal, Gelände, Satellit, Imagemap und „none“

Frage 4

Welche Schnittstelle implementieren Sie, um einem POI eine On-Click-Funktion hinzuzufügen?

• GoogleMap.OnPoiListener
• GoogleMap.OnPoiClickListener
• GoogleMap.OnPoiClick
• GoogleMap.OnPoiClicked

App zur Einstufung einreichen

Anleitung für Prüfer

Prüfen Sie, ob die App die folgenden Funktionen bietet:

• Wenn die App gestartet wird, wird die Google-Karte korrekt angezeigt. Das bedeutet, dass ein API-Schlüssel ordnungsgemäß generiert wurde.
• Nachdem die Google-Karte geladen wurde, wird die Kamera zum Zuhause oder zur Schule des Schülers bewegt. Im Code sollte dieser Schritt in der Callback-Methode onMapReady (GoogleMap googleMap) erfolgen.
• Markierungen werden am Standort der Schule des Schülers und an einem anderen Standort, z. B. dem Zuhause des Schülers, angezeigt.
• Die beiden Markierungen sind angepasst. Die Markierungen haben beispielsweise eine andere Farbe als die Standardfarbe Rot oder es wird ein benutzerdefiniertes Symbol verwendet.

12. Nächstes Codelab

Alle Codelabs im Kurs „Advanced Android Development“ finden Sie auf der Landingpage für Advanced Android Development-Codelabs.