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

Utwórz identyfikator mapy

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

Utwórz identyfikator mapy wektorowej

Zaktualizuj kod inicjowania mapy

Wymaga to utworzonego przed chwilą identyfikatora mapy. Znajdziesz go na stronie Zarządzanie Mapami.

  1. Wczytaj interfejs Maps JavaScript API.

  2. W razie potrzeby możesz wczytywać bibliotekę zaawansowanych znaczników z poziomu funkcji 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, nie można wczytać zaawansowanych znaczników. W ramach rozwiązywania problemów możesz dodać detektor mapcapabilities_changed, aby subskrybować zmiany możliwości mapy. Korzystanie z funkcji mapy jest opcjonalne i zalecane tylko do testowania i rozwiązywania problemów lub na potrzeby 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 znacznika zaawansowanego