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

• Eine Karten-ID erstellen
  Wenn Sie die Funktionen für das cloudbasierte Gestalten von Karteninhalten verwenden möchten, muss die Karte mit einer Karten-ID geladen werden.
• Migration von hartcodierten Stilen
  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 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. Beim Maps SDK for Android und Maps SDK for iOS und bei 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

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