Rozpocznij

Wybierz platformę: Android iOS JavaScript

Wykonaj te czynności, aby skonfigurować zaawansowane znaczniki.

Uzyskiwanie klucza interfejsu API i włączanie interfejsu Maps JavaScript API

Aby używać zaawansowanych znaczników, musisz mieć projekt Cloud z kontem rozliczeniowym i włączony interfejs Maps JavaScript API. Więcej informacji znajdziesz w artykule Konfigurowanie projektu Google Cloud.

Uzyskiwanie klucza interfejsu API

Tworzenie identyfikatora mapy

Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w artykule Personalizacja w chmurze. Ustaw typ mapy na JavaScript i wybierz opcję Wektor lub Raster.

Tworzenie identyfikatora mapy w Vector

Aktualizowanie kodu inicjalizacji mapy

Wymaga to identyfikatora mapy, który został przez Ciebie utworzony. Znajdziesz go na stronie Zarządzanie Mapami.

  1. Wczytaj interfejs Maps JavaScript API.

  2. W razie potrzeby wczytaj bibliotekę zaawansowanych znaczników z poziomu funkcji async:

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

  3. Podaj identyfikator mapy, gdy tworzysz jej instancję za pomocą właściwości mapId. Może to być podany przez Ciebie identyfikator mapy lub DEMO_MAP_ID.

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

Sprawdź możliwości mapy (opcjonalnie)

Zaawansowane znaczniki wymagają identyfikatora mapy. Jeśli brakuje identyfikatora mapy, zaawansowane znaczniki nie będą się wczytywać. W celu rozwiązania problemu możesz dodać listenera mapcapabilities_changed, aby subskrybować zmiany w mapie. Korzystanie z map jest opcjonalne i zalecane tylko do celów testowania i rozwiązywania problemów lub do celów zastępowania w czasie wykonywania.

// 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.
  }
});

Dalsze kroki

Tworzenie domyślnego zaawansowanego znacznika