Cloudbasiertes Gestalten von Karteninhalten

Die Google Maps Platform bietet Funktionen für das cloudbasierte Gestalten von Karteninhalten. Damit lassen sich Karten ganz einfach in der Google Cloud Console gestalten, anpassen und verwalten. So können Sie Nutzern individuell gestaltete 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-Landschaftsmerkmale angezeigt. Sie müssen einen Kartenstil erstellen, um diese Merkmale verwenden zu können.

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 erforderlich. 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 Web-Apps 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.

Die Funktionen für das cloudbasierte Gestalten von Karteninhalten sind 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 Funktionen auf allen Plattformen angezeigt.

Hinweis

• Erstellen Sie eine Karten-ID.
  Wenn Sie die Funktionen für das cloudbasierte Gestalten von Karteninhalten verwenden möchten, muss die Karte mit einer Karten-ID geladen werden.
• Entfernen Sie hartcodierte Stile.
  Sie möchten die Funktionen für das cloudbasierte 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 die Funktionen 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 zur GoogleMap-Beispiel-App und zum Projekt CloudBasedMapStylingViewController (GitHub-Beispiel für Swift | Objective-C).

Optionale Cloud Styling CocoaPod- oder GitHub-Demo

Anstatt von Grund auf neue Beispiele zu erstellen, können Sie hier unsere Beispiel-Anwendung für Objective-C ausprobieren, die zeigt, wie Sie Ihre iOS-Karte aus der Cloud gestalten können.

Beta-Demo-App erstellen

Wählen Sie in „Xcode“ die Schaltfläche zum Kompilieren, um das aktuelle Schema zu erstellen und anschließend auszuführen. Der Build führt zu einem 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 in der Cloud Console ein Projekt einzurichten und einen API-Schlüssel anzufordern. Bei der Konfiguration des Schlüssels in der Cloud Console können Sie die Bundle-ID Ihrer App angeben, damit nur Ihre App den Schlüssel verwenden kann. Die standardmäßige 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 in 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.

Demo der cloudbasierten Kartenstile

In der CloudStyling-Demo wird gezeigt, wie Sie die Karte mithilfe eines in der Google Cloud Console festgelegten Stils gestalten.

Wenn die Demoanwendung gestartet wird, klicken Sie oben in der Liste im Abschnitt „Beta-Beispiele“ auf die Demo für die Kartenanpassung.

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

Sie können auch Ihren eigenen Stil hinzufügen („Stilkarte“ > „Neue Karten-ID hinzufügen“). Die Karte wird dann mit Ihrer benutzerdefinierten Karte aktualisiert.

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 Funktionen für das cloudbasierte Gestalten von Karteninhalten mit einer vorhandenen Karte verwenden, die mit dem style-Parameter angepasst wird, müssen Sie sie entfernen, um Konflikte mit zukünftigen Funktionen zu vermeiden.

2. Wenn Sie eine Karten-ID einer neuen oder vorhandenen Karte hinzufügen möchten, auf der eine unserer Web-APIs verwendet wird, 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 über die 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" />