Über die WebGL-gestützten Funktionen für die Maps JavaScript API können Sie u. a. Neigung und Drehung Ihrer Karte steuern und 3D-Objekte direkt auf der Karte einfügen. Die folgenden Funktionen sind enthalten:
- Mit WebGL Overlay View können Sie Ihren Karten benutzerdefinierte 2D- und 3D-Grafiken sowie animierte Inhalte hinzufügen.
- Neigung und Position lassen sich jetzt programmatisch und mithilfe von Maus und Tastatur anpassen.
- Mit map.moveCamera() können Sie mehrere Kameraeigenschaften gleichzeitig ändern.
- Der Zoom unterstützt jetzt Bruchwerte.
Erste Schritte
Damit Sie die neuen WebGL-Elemente verwenden können, benötigen Sie die Karten-ID einer Vektorkarte. Außerdem muss die API-Bootstrap-Anfrage aktualisiert werden. Und so gehts:
Neue Karten-ID erstellen
Eine Anleitung zum Erstellen einer Karten-ID finden Sie unter Cloudbasiertes Gestalten von Karteninhalten. Legen Sie den Kartentyp auf JavaScript fest und wählen Sie die Option Vektor aus. Setzen Sie ein Häkchen neben Neigung und/oder Drehung, damit die Karte geneigt oder gedreht werden kann. Wenn Sie so vorgehen, lassen sich diese Werte programmatisch anpassen. Außerdem haben die Nutzer die Möglichkeit, Neigung und Position direkt auf der Karte zu ändern. 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.
Initialisierungscode der Karte aktualisieren
Dazu ist die soeben erstellte Karten-ID erforderlich. Sie finden sie auf der Seite Kartenverwaltung. Geben Sie eine Karten-ID an, wenn Sie die Karte mit der mapId-Eigenschaft instanziieren:
map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'MAP_ID' });
Beispiele
Beispiele zur Veranschaulichung folgender Elemente: