Erste Schritte

Um die Vorabversion der datengestützten Stile zu verwenden, müssen Sie eine Karten-ID erstellen, die die JavaScript-Vektorkarte verwendet. Danach erstellen Sie einen neuen Kartenstil, wählen die gewünschten Featureebenen für die Grenzen aus und verknüpfen den Stil mit Ihrer Karten-ID.

Wenn Sie die Region Lookup API verwenden möchten, müssen Sie sie in der Google API Console aktivieren.

Region Lookup API aktivieren

Karten-ID erstellen

Eine Anleitung zum Erstellen einer Karten-ID finden Sie unter Cloudbasiertes Gestalten von Karteninhalten. Legen Sie als Kartentyp JavaScript fest und wählen Sie die Option Vektor aus. Setzen Sie ein Häkchen bei Neigung und/oder Drehung, um Neigung und Drehung auf der Karte zu aktivieren. Wenn sich die Verwendung dieser Optionen negativ auf Ihre App auswirkt, lassen Sie Neigung und Drehung deaktiviert, damit Nutzer die Karte nicht neigen und drehen können.

Vektorkarten-ID erstellen

Neuen Kartenstil erstellen

Folgen Sie der Anleitung unter Kartenstile verwalten, um einen neuen Kartenstil zu erstellen. Verknüpfen Sie den Stil dann mit der Karten-ID, die Sie soeben erstellt haben.

Featureebenen auswählen

In der Google API Console können Sie auswählen, welche Featureebenen angezeigt werden sollen. So wird definiert, welche Arten von Grenzen auf der Karte zu sehen sind (z. B. für Orte oder Bundesländer).

Featureebenen verwalten

  1. Rufen Sie in der Google Cloud Console die Seite Kartenstile auf.
  2. Wählen Sie ein Projekt aus, wenn Sie dazu aufgefordert werden.
  3. Wählen Sie einen Kartenstil aus.
  4. Klicken Sie auf das Drop-down-Menü Elementebenen, um Ebenen hinzuzufügen oder zu entfernen.
  5. Klicken Sie auf Speichern, um Ihre Änderungen zu speichern und für Ihre Karten verfügbar zu machen.

Screenshot mit Drop-down-Menü

Initialisierungscode der Karte aktualisieren

Dazu ist die soeben erstellte Karten-ID erforderlich. Sie finden sie auf der Seite Kartenverwaltung.

  1. Verwenden Sie v=beta im script-Tag der API. Beispiel:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap"></script>

  2. Optional: Verwenden Sie den Parameter region, um den Kartenbereich festzulegen. Ihre Anwendung wird dann so angepasst, dass je nach Region unterschiedliche Kartenkacheln angezeigt werden. Auch die Polygone für bestimmte Grenzelemente werden dadurch geändert. Weitere Informationen zur Regionslokalisierung

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=JP&libraries=places&v=beta&callback=initMap"></script>

  1. Geben Sie eine Karten-ID an, wenn Sie die Karte mit der Eigenschaft mapId instanziieren. Dies sollte die Karten-ID sein, die Sie mit einem Kartenstil mit aktivierten Featureebenen konfiguriert haben.

    map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});

Einer Karte Featureebenen hinzufügen

Um einen Verweis auf eine Feature-Ebene auf Ihrer Karte zu erhalten, rufen Sie beim Initialisieren der Karte map.getFeatureLayer() auf:

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

Kartenfunktionen prüfen

Für datengestützte Stile sind Funktionen erforderlich, die in der Google API Console aktiviert und einer Karten-ID zugeordnet werden. Karten-IDs sind kurzlebig und können sich ändern. Daher können Sie map.getMapCapabilities() aufrufen, um zu prüfen, ob eine bestimmte Funktion (z. B. datengestützte Stile) verfügbar ist, bevor Sie sie aufrufen. Diese Prüfung ist optional.

Im folgenden Beispiel wird veranschaulicht, wie Sie einen Listener hinzufügen, um über Änderungen der Kartenfunktionen informiert zu werden:

// subscribe to changes
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (mapCapabilities.isDataDrivenStylingAvailable) {
    // Call data-driven styling here.
  } // When !mapCapabilities.isDataDrivenStylingAvailable, any existing featureLayers are also unavailable.
});

Nächste Schritte