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

Zanim zaczniesz używać zaawansowanych znaczników, musisz mieć projekt w Google Cloud z kontem rozliczeniowym i włączonym interfejsem 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 Rast.

Utwórz identyfikator mapy wektorowej

Aktualizowanie kodu inicjowania mapy

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

  1. Wczytaj Maps JavaScript API.

  2. Wczytaj bibliotekę zaawansowanych znaczników z poziomu async :

    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
  3. Podaj identyfikator mapy podczas tworzenia instancji mapy 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ć. Aby rozwiązać problem, możesz dodać detektor mapcapabilities_changed, aby zasubskrybować funkcje mapy zmian. Korzystanie z funkcji Map jest opcjonalne i zalecane tylko do testowania i rozwiązywania problemów lub w przypadku działania awaryjnego środowiska wykonawczego.

// 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