Jetzt starten

Plattform auswählen: Android iOS JavaScript

Führen Sie diese Schritte aus, um erweiterte Markierungen einzurichten.

API-Schlüssel anfordern und Maps JavaScript API aktivieren

Damit Sie erweiterte Markierungen verwenden können, benötigen Sie ein Cloud-Projekt mit einem Rechnungskonto. Außerdem muss die Maps JavaScript API aktiviert sein. Weitere Informationen finden Sie unter Google Cloud-Projekt einrichten.

API-Schlüssel anfordern

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 entweder die Option Vektor oder Raster aus.

Wichtig: Für Testzwecke können Sie den Schritt zum Erstellen und Konfigurieren überspringen eine Karten-ID, indem Sie mapId: 'DEMO_MAP_ID' in Ihrem App-Code verwenden.

Initialisierungscode der Karte aktualisieren

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

1. Laden Sie die Maps JavaScript API.

2. Öffnen Sie die Bibliothek mit erweiterten Markierungen bei Bedarf aus einer async-Funktion heraus:

   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

3. Geben Sie eine Karten-ID an, wenn Sie die Karte mit der Eigenschaft mapId instanziieren. Sie können selbst eine Karten-ID angeben oder DEMO_MAP_ID verwenden.

   const map = new
   google.maps.Map(document.getElementById('map'), {
     center: {lat: -34.397, lng: 150.644},
     zoom: 8,
     mapId: 'YOUR_MAP_ID'
   });

Achtung: In den Beispielkarten für erweiterte Markierungen werden Karten-IDs verwendet, die mit einem Kartenstil mit reduzierten POIs verknüpft sind. Wenn Sie Beispielcode wiederverwenden, sollten Sie diese Karten-IDs durch DEMO_MAP_ID oder eigene Karten-IDs ersetzen.

Kartenfunktionen prüfen (optional)

Für erweiterte Markierungen ist eine Karten-ID erforderlich. Wenn die Karten-ID fehlt, können keine erweiterten Markierungen geladen werden. Zur Fehlerbehebung können Sie einen mapcapabilities_changed-Listener hinzufügen, um über Änderungen der Kartenfunktionen informiert zu werden. Die Verwendung von „mapCapabilities“ ist optional und wird nur für Test- und Fehlerbehebungszwecke oder für das Laufzeit-Fallback empfohlen.

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

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

Nächste Schritte

Erweiterte Standardmarkierung erstellen