Karte mit benutzerdefiniertem Stil hinzufügen

In dieser Anleitung wird beschrieben, wie du deiner Android-App eine Karte mit benutzerdefiniertem Stil hinzufügst. Der Nachtmodus wird als Beispiel für einen benutzerdefinierten Stil verwendet.

Mit Formatoptionen kannst du die Darstellung der Standard-Google-Kartenformate individuell gestalten, indem du die visuelle Anzeige von Merkmalen wie Straßen, Parks, Unternehmen und anderen Points of Interest (POI) änderst. Du kannst also bestimmte Komponenten der Karte hervorheben oder das Design der Karte an die Gestaltung deiner App anpassen.

Stile lassen sich nur für den Kartentyp normal verwenden. Der Stil wirkt sich nicht auf Indoor-Karten aus.

Code abrufen

Klone das Repository „Google Maps Android API v2 Samples“ oder lade es von GitHub herunter.

Entwicklungsprojekt einrichten

In den folgenden Schritten wird erklärt, wie Sie das Anleitungsprojekt in Android Studio erstellen.

  1. Laden Sie Android Studio herunter und installieren Sie die App.
  2. Fügen Sie das Paket Google Play-Dienste in Android Studio ein.
  3. Klonen Sie das Repository „Google Maps Android API v2 Samples“ oder laden Sie es herunter (sofern Sie das nicht schon zu Beginn getan haben).
  4. Anleitungsprojekt importieren:

    • Klicken Sie in Android Studio auf File > New > Import Project („Datei“ > „Neu“ > „Projekt importieren“).
    • Gehe zu dem Speicherort, an dem du das Repository „Google Maps Android API v2 Samples“ nach dem Download gespeichert hast.
    • Suche dort nach dem Projekt StyledMap:
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • Wähle das Projektverzeichnis aus und klicke auf OK. Ihr Projekt wird jetzt mit dem Build-Tool „Gradle“ in Android Studio erstellt.

API-Schlüssel anfordern und die erforderlichen APIs aktivieren

Als letzten Schritt benötigen Sie noch einen Google API-Schlüssel, der eine Berechtigung zum Verwenden des Maps SDK for Android hat.

Klicke hier, um einen Schlüssel anzufordern und die API zu aktivieren.

Schlüssel anfordern

Weitere Informationen findest du unter API-Schlüssel anfordern.

API-Schlüssel in App einfügen

  1. Bearbeite die gradle.properties-Datei deines Projekts.
  2. Füge deinen API-Schlüssel in den Wert der GOOGLE_MAPS_API_KEY-Eigenschaft ein. Wenn du deine App erstellst, wird der API-Schlüssel von Gradle kopiert und in das Android-Manifest der App eingefügt.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

App erstellen und ausführen

  1. Verbinden Sie ein Android-Gerät mit Ihrem Computer. Folgen Sie dieser Anleitung, um Entwickleroptionen auf Ihrem Android-Gerät zu aktivieren und Ihr System so zu konfigurieren, dass das Gerät erkannt wird. Alternativ können Sie mit Android Virtual Device (AVD) Manager ein virtuelles Gerät konfigurieren. Beim Auswählen eines Emulators sollten Sie ein Image angeben, das die Google-APIs enthält. Weitere Informationen finden Sie im Startleitfaden.
  2. Klicken Sie in Android Studio im Menü auf Run bzw. das Abspielsymbol. Wählen Sie ein Gerät aus, wenn Sie dazu aufgefordert werden.

In Android Studio wird Gradle aufgerufen, um die App zu erstellen. Dann wird die App auf dem Gerät oder im Emulator ausgeführt. Du solltest eine Karte mit dunklem Stil (Nachtmodus) sehen, ähnlich wie das Bild auf dieser Seite.

Fehlerbehebung:

Code verstehen

In diesem Teil der Anleitung werden die wesentlichsten Teile der App StyledMap erläutert, damit du besser verstehst, wie du eine ähnliche App erstellst.

Eine Ressource mit einem JSON-Formatobjekt hinzufügen

Füge deinem Entwicklungsprojekt eine Ressource mit den Stildeklarationen im JSON-Format hinzu. Du kannst eine Rohressource oder einen String verwenden, wie in den folgenden Beispielen gezeigt.

Rohressource

Definiere eine Rohressource in /res/raw/style_json.json, die die JSON-Stildeklaration für den Nachtmodus enthält:

String-Ressource

Definiere eine String-Ressource in /res/values/style_strings.xml, die die JSON-Stildeklaration für den Nachtmodus enthält. In dieser Anleitung wird der Stringname style_json verwendet. Vor Anführungszeichen in dieser Datei musst du einen umgekehrten Schrägstrich platzieren (Escaping):

JSON-Stilobjekt an deine Karte übergeben

Um deine Karte mit einem Stil zu versehen, kannst du GoogleMap.setMapStyle() aufrufen und ein MapStyleOptions-Objekt übergeben, das deine Stildeklarationen im JSON-Format enthält.

Rohressource

Im folgenden Codebeispiel wird davon ausgegangen, dass dein Projekt eine Rohressource mit dem Namen style_json enthält:

// Copyright 2020 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package com.example.styledmap;

import android.content.res.Resources;
import android.os.Bundle;
import android.util.Log;
import androidx.appcompat.app.AppCompatActivity;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a raw resource.
 */
public class MapsActivityRaw extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityRaw.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_raw);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        try {
            // Customise 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.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

Das Layout activity_maps_raw.xml sieht so aus:

String-Ressource

Im folgenden Codebeispiel wird davon ausgegangen, dass dein Projekt eine String-Ressource mit dem Namen style_json enthält:

package com.example.styledmap;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a string resource.
 */
public class MapsActivityString extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityString.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_string);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        // Customise the styling of the base map using a JSON object defined
        // in a string resource file. First create a MapStyleOptions object
        // from the JSON styles string, then pass this to the setMapStyle
        // method of the GoogleMap object.
        boolean success = googleMap.setMapStyle(new MapStyleOptions(getResources()
                .getString(R.string.style_json)));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

Das Layout activity_maps_string.xml sieht so aus:

Weitere Informationen zu JSON-Stildeklarationen

Für Karten mit benutzerdefinierten Stilen kommen zwei Konzepte zum Einsatz, um Farben und andere Stiländerungen auf eine Karte anzuwenden:

  • Selektoren geben die geografischen Komponenten an, die auf der Karte mit einem Stil versehen werden können. Dazu gehören Straßen, Parks, Gewässer usw. sowie ihre Bezeichnungen. Die Selektoren enthalten Funktionen und Elemente, die als featureType- und elementType-Eigenschaften angegeben sind.
  • Styler sind Farb- und Sichtbarkeitseigenschaften, die auf Kartenelemente angewendet werden können. Damit definierst du die Anzeigefarbe, indem Farbton-, Farb- sowie Helligkeits-/Gammawerte kombiniert werden.

Eine ausführliche Beschreibung der JSON-Stiloptionen findest du in der Stilreferenz.

Maps Platform Styling Wizard

Mit dem Maps Platform Styling Wizard kannst du ganz schnell ein JSON-Stilobjekt generieren. Das Maps SDK for Android unterstützt dieselben Stildeklarationen wie die Maps JavaScript API.

Weitere Informationen

Kartenfunktionen mit Stilen ausblenden