Cloudbasiertes Gestalten von Karteninhalten

Die Google Maps Platform bietet Funktionen für das cloudbasierte Gestalten von Karteninhalten, mit deren Hilfe sich Karten ganz einfach in der Google Cloud Console gestalten, anpassen und verwalten lassen. So können Sie Nutzern personalisierte Karten bieten, ohne bei jeder Änderung der Gestaltung den App-Code aktualisieren zu müssen.

Bei Stilen, die vor dem 15. September 2020 erstellt wurden, werden keine erweiterten Google Maps-Landschaftselemente angezeigt. Wenn Sie diese Elemente verwenden möchten, müssen Sie einen Kartenstil erstellen.

Sobald eine Karten-ID vorhanden ist, können Sie die Funktionen zum cloudbasierten Gestalten von Karteninhalten nutzen, um Kartenstile für alle Apps, in denen Google Maps verwendet wird, zu erstellen und zu bearbeiten. Dazu sind keine Aktualisierungen des App-Codes erforderlich. Alle Stiländerungen lassen sich in der Cloud Console vornehmen. Es sind keine Programmierkenntnisse nötig. Sie können die Darstellung und Farbe bestimmter Kartenelemente anpassen, darunter Straßen, Gebäude, Gewässer, POIs und Routen mit öffentlichen Verkehrsmitteln.

Zu den Funktionen gehören:

• Cloudbasiertes Gestalten von Karteninhalten: Statt Karten mit Code in JSON zu gestalten, haben Sie die Möglichkeit, mithilfe von Karten-IDs und Kartenstilen in der Cloud Console dynamische und statische Karten zu erstellen und zu verwalten.
• Vektorkarte: JavaScript-Entwickler können die WebGL-gestützte vektorbasierte Karte, die auch auf maps.google.com verfügbar ist, direkt in ihren Webanwendungen verwenden.
• Filter für Unternehmens-POIs: Optional können fünf Kategorien von Unternehmens-POIs aus der Kartendarstellung entfernt werden.
• Steuerelemente für die POI-Dichte: Die POI-Dichte auf der Basiskarte lässt sich so anpassen, dass standardmäßig mehr oder weniger POIs zu sehen sind.

Cloudbasiertes Gestalten von Karteninhalten ist für das Maps SDK for Android¹, das Maps SDK for iOS, JavaScript und die Maps Static API verfügbar. Es werden aber nicht alle Elemente auf allen Plattformen angezeigt.

Hinweis

• Eine Karten-ID erstellen
  Wenn Sie das cloudbasierte Gestalten von Karteninhalten verwenden möchten, muss die Karte anhand einer Karten-ID geladen werden.
• Aktualisierung von hartcodierten Stilen Sie möchten die Funktionen zum cloudbasierten Gestalten von Karteninhalten für eine bestehende Karte verwenden, die mit hartcodierten Stilen wie JSON- oder URL-Abfrageparametern angepasst wurde? Dann sollten Sie diese Stile entfernen, bevor Sie eine Karten-ID hinzufügen, um mögliche Konflikte mit zukünftigen Funktionen zu vermeiden. Sie können Ihre JSON-Stile in einen neuen Kartenstil importieren.
  • Aktualisieren Sie auf Android-Geräten die MapStyleOptions.
  • Für iOS muss die Klasse GMSMapStyle aktualisiert werden.
  • Entfernen Sie bei JavaScript den MapTypeStyle-Stil.
  • Entfernen Sie in Maps Static den Parameter style.

Abrechnung

Für das cloudbasierte Gestalten von Karteninhalten ist eine Karten-ID erforderlich. Bei Maps SDK for Android, Maps SDK for iOS und JavaScript wird die Nutzung der Karten-ID über die SKU „Dynamic Maps“ abgerechnet. In der Maps Static API wird die Nutzung der Karten-ID über die SKU „Static Maps“ abgerechnet.

Beispiele

Android

Beispiel-App „ApiDemos“ ausführen

Informationen zum Ausführen der Beispiel-App „ApiDemos“ finden Sie im GitHub-Beispiel für Java und für Kotlin sowie in der CloudBasedMapStylingDemoActivity-Demo für Java und für Kotlin.

Es gibt eine Beispiel-App für Java bzw. für Kotlin, die zeigt, wie Sie Ihre Android-Karte über die Cloud gestalten können.

Bekannte Probleme

Sobald Ihre App an Kunden ausgeliefert wird, lassen sich benutzerdefinierte Stile für Karten mit Karten-IDs über die Google Cloud Console aktualisieren. Die neuen Stile erscheinen nach wenigen Stunden in der App.

Damit neue benutzerdefinierte Stile zu Testzwecken sofort angezeigt werden, müssen Sie die App-Daten von Ihrem Testgerät löschen. Weitere Informationen dazu finden Sie in der Android-Hilfe unter Speicherplatz freigeben.

Die Einstellungen können je nach Smartphone variieren. Weitere Informationen erhalten Sie vom Gerätehersteller.

iOS

Beispiel-App „ApiDemos“ ausführen

Informationen zum Ausführen der Beispiel-App „ApiDemos“ finden Sie im GitHub-Beispiel für die Google Maps-Beispiel-App und im Projekt CloudBasedMapStylingViewController (GitHub-Beispiel für Swift | Objective-C).

Optionale Demo für Cloud Styling mit CocoaPod oder GitHub

Anstatt ganz von vorn anzufangen, können Sie hier unsere Objective-C-Beispielanwendung ausprobieren, die zeigt, wie Sie Ihre iOS-Karte über die Cloud gestalten können.

Beta-Demo-App entwickeln

Wählen Sie in „Xcode“ die Schaltfläche zum Kompilieren, um das aktuelle Schema zu erstellen und anschließend auszuführen. Der Build erzeugt einen Fehler und fordert Sie auf, Ihren API-Schlüssel in die Datei SDKDemoAPIKey.h einzugeben.

Wenn Sie noch keinen API-Schlüssel haben, folgen Sie dieser Anleitung, um ein Projekt in der Cloud Console einzurichten und einen API-Schlüssel anzufordern. Wenn Sie den Schlüssel in der Cloud Console konfigurieren, können Sie die Bundle-ID der Anwendung angeben, damit nur Ihre Anwendung den Schlüssel verwenden kann. Die Standard-Bundle-ID der SDK-Beispiel-App ist com.example.GoogleMapsDemos.

Bearbeiten Sie die Datei SDKDemoAPIKey.h und fügen Sie Ihren API-Schlüssel in die Definition der kAPIKey-Konstante ein:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

Wenn Sie von Xcode aufgefordert werden, die Datei SDKDemoAPIKey.h zum Bearbeiten zu entsperren, wählen Sie Entsperren aus.

Entfernen Sie die folgende Zeile:

```
#error Register for API Key and insert here.
```

Erstellen Sie das Projekt und führen Sie es aus.

Cloudbasiertes Gestalten von Karteninhalten – Demo

Die CloudStyling-Demo zeigt, wie die Karte mithilfe eines in der Google Cloud Console festgelegten Stils gestaltet werden kann.

Wenn die Demoanwendung gestartet wird, klicken Sie oben in der Liste im Abschnitt „Betabeispiele“ auf die Demo „Kartenanpassung“.

Klicke auf Stilkarte, um zu sehen, wie sich das Laden verschiedener Karten-IDs auswirkt.

Sie können auch einen eigenen Stil hinzufügen („Stilkarte“ > „Neue Karten-ID hinzufügen“), um die Aktualisierung Ihrer benutzerdefinierten Karte zu sehen.

JavaScript

Hier sehen Sie ein einfaches Beispiel für das Laden einer Karte mit benutzerdefinierten Stilen mithilfe einer Karten-ID. In diesem Fall referenziert die Maps JavaScript API die Karten-ID 8e0a97af9386fef, wenn die Karte geladen wird, und wendet automatisch den Kartenstil an, der derzeit mit dieser Karten-ID verknüpft ist.

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js

Maps Static API

Eine Karten-ID ist eine Kennung, die einem bestimmten Kartenstil oder -element zugeordnet ist. In der Google Cloud Console können Sie einen Kartenstil konfigurieren und ihn mit einer Karten-ID verknüpfen. Wenn Sie dann in Ihrem Code auf eine Karten-ID verweisen, wird der verknüpfte Kartenstil in Ihrer App angezeigt. Bei allen folgenden Aktualisierungen des Stils wird in Ihrer App automatisch der neue Stil verwendet, ohne dass Ihre Kunden Änderungen vornehmen müssen.

1. Wenn Sie das cloudbasierte Gestalten von Karteninhalten mit einer vorhandenen Karte verwenden, die mit dem Parameter style angepasst wird, müssen Sie sie entfernen, um mögliche Konflikte mit zukünftigen Funktionen zu vermeiden.

2. Wenn Sie einer neuen oder vorhandenen Karte, für die eine unserer Web APIs verwendet wird, 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=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />