Cloudbasiertes Gestalten von Karteninhalten

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Die Google Maps Platform bietet Funktionen für cloudbasierte Kartenstile, mit denen sich Ihre Karten ganz einfach in der Google Cloud Console gestalten, anpassen und verwalten lassen. So können Sie Nutzern individuell gestaltete Karten bieten, ohne bei jeder Stiländerung 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 anhand der Funktion „Cloudbasiertes Gestalten von Karteninhalten“ Kartenstile in jeder App erstellen und bearbeiten, in der Google Maps angewendet wird, ohne den App-Code aktualisieren zu müssen. 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 diesen 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 dieselbe vektorbasierte Karte mit WebGL-Beschleunigung wie auf maps.google.com direkt in ihren eigenen 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 zwar für das Maps SDK for Android1, das Maps SDK for iOS, JavaScript und die Maps Static API verfügbar, es sind nicht jedoch nicht alle Funktionen auf allen Plattformen sichtbar.

Hinweis

  • Karten-ID erstellen
    Wenn Sie cloudbasierte Kartenstile verwenden möchten, muss Ihre Karte mit einer Karten-ID geladen werden.
  • Von alten Stilen migrieren
    Bevor Sie eine Karten-ID hinzufügen, um cloudbasierte Kartenstile zu verwenden, die mit hartcodierten Stilen wie JSON- oder URL-Suchparametern angepasst wurden, sollten Sie die hartcodierten Stile entfernen, um potenzielle Konflikte mit zukünftigen Funktionen zu vermeiden. Sie können Ihre JSON-Stile in einen neuen Kartenstil importieren.
* Maps SDK for Android aktualisieren
Um cloudbasierte Kartenstile zu verwenden, müssen Sie Version 18.0.0 oder höher des Maps SDK for Android und das neueste Renderer für Maps SDK for Android verwenden.

Abrechnung

Für cloudbasiertes Gestalten von Karteninhalten ist eine Karten-ID erforderlich. Beim Maps SDK for Android, Maps SDK for iOS und JavaScript wird die Verwendung der Karten-ID mit der SKU „Dynamic Maps“ belastet. In der Maps Static API wird die Nutzung der Karten-ID mit der Static Maps SKU in Rechnung gestellt.

Beispiele

Android

Beispiel-App „ApiDemos“ ausführen

Informationen zum Ausführen der ApiDemos-Beispielanwendung finden Sie im GitHub-Beispiel (Java | Kotlin) und in der Demo zu CloudBasedMapStylingDemoActivity (Java | Kotlin).

Es gibt eine Beispielanwendung für Java und Kotlin, die zeigt, wie Sie Ihre Android-Karte aus der 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 ApiDemos-Beispielanwendung finden Sie in der GitHub-Beispielanwendung GoogleMap-Beispielanwendung und im Projekt CloudBasedMapStylingViewController (GitHub-Beispiel für Swift | Objective-C).

Optionale Demo zu Cloud Styling CocoaPod oder GitHub

Anstatt die komplett neue Beispielanwendung zu verwenden, kannst du hier die Beispielanwendung „Objective-C“ ausprobieren.

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 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 in der Cloud Console ein Projekt einzurichten und einen API-Schlüssel anzufordern. Wenn Sie den Schlüssel in der Cloud Console konfigurieren, 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 von Xcode aufgefordert werden, die Datei SDKDemoAPIKey.h zur Bearbeitung 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 für cloudbasierte Kartenstile

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

Wenn die Demoanwendung gestartet wird, klicke im Abschnitt „Beta-Beispiele“ oben in der Liste auf die Demo zur Kartenanpassung.

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

Sie können auch einen eigenen Stil hinzufügen ("Style Map" > "Neue Karten-ID hinzufügen&quot) und die Karte entsprechend aktualisieren.

JavaScript

Dies ist ein grundlegendes Beispiel für das Laden einer benutzerdefinierten Karte mit einer Karten-ID. In diesem Fall verweist das Maps JavaScript auf die Karten-ID 8e0a97af9386fef, wenn die Karte geladen wird, und wendet automatisch den Kartenstil an, der derzeit mit dieser Karten-ID verknüpft ist.

TypeScript

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;

JavaScript

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

window.initMap = initMap;
Beispiel ansehen

Beispiel ausprobieren

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 du cloudbasierte Kartenstile mit einer vorhandenen Karte verwendest, die mit dem Parameter style angepasst wird, musst du sie entfernen, um einen potenziellen Konflikt mit zukünftigen Funktionen zu vermeiden.

  2. Wenn du einer neuen oder vorhandenen Karte mit einer unserer Web-APIs eine Karten-ID hinzufügen möchtest, hängst du den URL-Parameter map_id an und lege ihn auf deine Karten-ID fest. In diesem Beispiel wird gezeigt, wie Sie über die Maps Static API eine Karten-ID in eine Karte einfü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" />
    


  1. Im Lite-Modus von Android ist cloudbasiertes Gestalten von Karteninhalten nicht verfügbar.