Karten-IDs verwenden

Eine Karten-ID ist eine eindeutige Kennung, die eine einzelne Instanz einer Google Maps-Karte darstellt. Mithilfe von Karten-IDs können Sie Funktionen aktivieren oder Karten auf Ihren Websites und in Ihren Anwendungen verwalten oder stilisieren. Sie können Karten-IDs für jede benötigte Plattform (JavaScript, Android, iOS oder statische Karten) in Ihrem Google Cloud Console-Projekt auf der Seite Kartenverwaltung erstellen.

Einsatzmöglichkeiten von Karten-IDs

Verwenden Sie Karten-IDs, um Elemente und Stile zu aktivieren. Hier sind einige Beispiele für die Verwendung von Karten-IDs. Eine vollständige Liste finden Sie unter Funktionen, für die Karten-IDs verwendet werden:

  • Cloudbasierte Kartenstile: Verknüpfen Sie eine Karten-ID mit einem Kartenstil, um Ihre Karten in der Google Cloud Console zu gestalten, anzupassen und zu verwalten. Verfügbar auf allen Plattformen: JavaScript, Android, iOS und Maps Static API.

  • Vektorkarten: Mit einer Karten-ID können Sie eine Karte verwenden, die aus vektorbasierten Kacheln besteht, die beim Laden auf der Clientseite mit WebGL gerendert werden. Verfügbar unter JavaScript.

  • Erweiterte Markierungen: Verwenden Sie eine Karten-ID, um erweiterte Markierungen zu aktivieren. Verfügbar für JavaScript, Android und iOS.

Beispiel für cloudbasiertes Gestalten von Karteninhalten

So verwenden Sie cloudbasierte Kartenstile, um Karten auf Ihrer Website und in Android-Apps zu gestalten:

  1. Erstellen Sie Karten-IDs für jede Plattform, die Sie verwenden. Erstellen Sie beispielsweise eine JavaScript- und eine Android-Karten-ID. Weitere Informationen finden Sie unter Karten-IDs erstellen.

  2. Konfigurieren Sie einen Kartenstil in der Google Cloud Console. Weitere Informationen finden Sie unter Cloudbasiertes Gestalten von Karteninhalten.

  3. Verknüpfen Sie beide Karten-IDs in der Google Cloud Console mit dem Kartenstil. Weitere Informationen finden Sie unter Karten-IDs mit Ihrem Stil verknüpfen.

  4. Verweise im JavaScript-Code Ihrer Website und im Code Ihrer Android-App auf die Karten-ID. Weitere Informationen finden Sie unter Karten-ID zur App hinzufügen.

Der mit Ihren Karten-IDs verknüpfte Kartenstil wird dann auf Ihrer Website und in Ihrer Android-App angezeigt. Sie können Ihren Kartenstil in der Cloud Console aktualisieren. Die Änderungen werden dann automatisch an beiden Stellen angezeigt, ohne dass Ihre Kunden App-Updates vornehmen müssen.

Funktionen, die Karten-IDs verwenden

In der folgenden Tabelle sind die Google Maps Platform-Funktionen und ‑APIs aufgeführt, für die Karten-IDs verwendet werden:

Funktion oder API Karten-IDs für diese Zielvorhaben verwendet
Erweiterte Markierungen Aktivieren Sie erweiterte Markierungen. Sie müssen keine Karten-ID erstellen, sondern können stattdessen die Demo-Karten-ID „DEMO_MAP_ID“ verwenden.
Datengestützte Stile für Grenzen Verknüpfen Sie die Karten-ID mit einer Reihe von Grenzen und einem Stil, um die Karte entsprechend den Grenzen zu gestalten.
Datengestützte Stile für Datensätze Verknüpfen Sie die Karten-ID mit Daten und einem Stil, um die Karte entsprechend dem Datensatz zu gestalten.
Flutter Google-Karten in Ihren Flutter-Apps stylen
Maps Embed API Geben Sie die Karte an, die auf einer Webseite eingebettet werden soll, und legen Sie einen Stil fest.
Maps JavaScript API Stil der Karte für die Anzeige auf einer Webseite festlegen
Maps SDK for Android Stil der Karte für die Anzeige in einer Android-Anwendung festlegen.1
Maps SDK for iOS Stil der Karte für die Anzeige in einer iOS-App festlegen.1
Maps Static API Geben Sie die Karte an und gestalten Sie sie so, dass sie als statisches Bild gerendert wird.
Mobilitätslösungen Verwenden Sie die Maps JavaScript API und die SDKs für Android und iOS, um Karten in Mobilitätslösungen zu gestalten.1
WebGL (Vektorkarten) Aktivieren Sie WebGL-Funktionen mit einer JavaScript-Vektorkarten-ID.

1 Durch Verwendung einer Karten-ID im Maps SDK for Android oder Maps SDK for iOS wird ein Kartenaufruf ausgelöst, der mit der SKU „Dynamic Maps“ verrechnet wird.

Karten-IDs erstellen und verwenden

Eine Karten-ID ist eine eindeutige Kennung, die eine einzelne Instanz einer Google-Karte darstellt. Sie erstellen Karten-IDs und aktualisieren den mit einer Karten-ID verknüpften Kartenstil in der Cloud Console.

Erforderliche Berechtigungen

Wenn Sie Karten-IDs in Ihrem Projekt erstellen oder verwalten möchten, müssen Sie auf der IAM-Seite der Cloud Console für das Projekt ein Hauptkonto mit den entsprechenden Berechtigungen auf Rollenebene (Bearbeiter oder Inhaber) verwenden. Weitere Informationen finden Sie in der Referenz zu einfachen und vordefinierten IAM-Rollen.

Karten-IDs erstellen

In der Cloud Console kannst du jederzeit Karten-IDs erstellen und einen mit einer Karten-ID verknüpften Stil ändern.

So erstellen Sie eine Karten-ID:

  1. Melden Sie sich in der Cloud Console an und öffnen Sie ein Projekt mit den erforderlichen Berechtigungen.

  2. Rufen Sie in der Cloud Console die Seite Kartenverwaltung auf.

  3. Wählen Sie Karten-ID erstellen aus.

    Neue Karten-ID erstellen

  4. Führen Sie auf der Seite Neue Karten-ID erstellen die folgenden Schritte aus:

    1. Geben Sie unter Name einen Namen für die Karten-ID ein.
    2. Optional: Geben Sie unter Beschreibung an, wofür die Karten-ID verwendet wird.
    3. Wählen Sie unter Kartentyp die Plattform aus, auf der Sie die Karten-ID verwenden möchten. Wenn Sie JavaScript auswählen, wählen Sie auch den Kartentyp Raster (Standard) oder Vektor aus. Weitere Informationen zu Vektorkarten finden Sie unter Vektorkarten.
    4. Wählen Sie Speichern aus, um die neue Karten-ID zu sehen.

Karten-ID mit einem Kartenstil verknüpfen

In dieser Anleitung wird davon ausgegangen, dass in deinem Projekt mindestens ein Kartenstil vorhanden ist. Wenn Sie noch keine Kartenstile haben, lesen Sie den Hilfeartikel Cloudbasiertes Gestalten von Karteninhalten und wählen Sie Ihre Plattform aus, um eine Anleitung zum Erstellen eines Stils aufzurufen.

  1. Rufen Sie in der Cloud Console die Seite Kartenverwaltung auf.
  2. Wählen Sie in der Tabelle eine vorhandene Karten-ID aus.
  3. Wählen Sie unter Verknüpfter Kartenstil einen Kartenstil aus.

  4. Klicken Sie auf Speichern.

    Detailseite für eine Karten-ID, auf der Sie einen Kartenstil verknüpfen

Karten-ID zur App hinzufügen

Android

Sie können Ihre Karten-ID mit einem <fragment>-Element in der Layoutdatei der Aktivität über die Klasse MapView oder programmatisch über die Klasse GoogleMapOptions hinzufügen.

Angenommen, Sie haben eine Karten-ID erstellt, die als Stringwert map_id in res/values/strings.xml gespeichert ist:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

Bei Karten, die über ein <fragment>-Element in der Layoutdatei der Aktivität hinzugefügt werden, muss für alle Kartenfragmente, die den benutzerdefinierten Stil haben sollen, die Karten-ID im Attribut map:mapId angegeben werden:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

Sie können auch das Attribut map:mapId der Klasse MapView verwenden, um eine Karten-ID anzugeben:

<com.google.android.gms.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    map:mapId="@string/map_id" />

Wenn Sie eine Karten-ID programmatisch angeben möchten, übergeben Sie sie mithilfe der Klasse GoogleMapOptions an eine MapFragment-Instanz:

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

Erstellen Sie wie gewohnt Ihre App in Android Studio und führen Sie sie aus. Benutzerdefinierte Stile, die im ersten Schritt konfiguriert wurden, werden auf alle Karten mit der angegebenen Karten-ID angewendet.

iOS

So instanziieren Sie eine Karte mit einer Karten-ID:

  1. Erstellen Sie eine GMSMapID mit dem String der Karten-ID aus der Cloud Console.
  2. Erstellen Sie eine GMSMapView und geben Sie dabei die soeben erstellte Karten-ID an.

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

Wenn Sie eine eigene Karten-ID verwenden, können Sie in der Cloud Console jederzeit einen neuen Stil für Ihre Karten-ID festlegen. Dieser Stil wird dann innerhalb von etwa sechs Stunden automatisch in Ihrer Kartenansicht für Sie und Ihre Nutzer angezeigt.

Wenn Sie die Änderungen sofort sehen möchten, können Sie die App schließen und neu starten. Schließen Sie dazu die App, beenden Sie sie aus der Liste der zuletzt verwendeten Apps und öffnen Sie sie dann wieder. Die aktualisierte Karte ist dann sichtbar.

JavaScript

So erstellen Sie eine Karte mit einer Karten-ID in Ihrem Anwendungscode:

  1. Wenn Sie Ihre Karte bereits mit eingebettetem JSON-Code anpassen, entfernen Sie das Attribut styles aus dem MapOptions-Objekt. Andernfalls überspringen Sie diesen Schritt.

  2. Fügen Sie der Karte mithilfe der mapId-Eigenschaft eine Karten-ID hinzu. Beispiel:

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

Maps Static

Wenn Sie einer neuen oder vorhandenen Karte, die eine unserer Web-Dienst-APIs verwendet, eine Karten-ID hinzufügen möchten, hängen Sie den URL-Parameter map_id an und legen Sie ihn auf Ihre Karten-ID fest. In diesem Beispiel wird gezeigt, wie Sie einer Karte mithilfe der Maps Static API eine Karten-ID hinzufügen.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=MAP_ID&signature=YOUR_SIGNATURE" />

Eine Karte, die auf der Brooklyn Bridge in New York City, NY, USA, zentriert ist, mit Kartensteuerelementen unten rechts. Die Karte zeigt benutzerdefinierte Stile für Straßen, Gewässer und Land.

Wenn Sie bereits vor dem Hinzufügen Ihrer Karten-ID eine digitale Signatur in Ihrer Static Maps-URL haben, müssen Sie nach dem Hinzufügen der Karten-ID eine neue digitale Signatur erstellen und hinzufügen. Denken Sie beim Generieren Ihres neuen URL-Signatur-Secrets daran, Ihre vorherige digitale Signatur aus der URL zu entfernen.