Rozpocznij

Wybierz platformę: Android iOS JavaScript

Aby skonfigurować znaczniki zaawansowane, wykonaj te czynności.

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

Aby korzystać ze znaczników zaawansowanych, 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 chmury. Ustaw typ mapy na JavaScript, a następnie wybierz opcję Wektorowy lub Raster.

Utwórz identyfikator mapy wektorowej

Zaktualizuj kod inicjowania mapy

Wymaga to identyfikatora mapy, który właśnie utworzono. Znajdziesz go na stronie Zarządzanie Mapami.

  1. Wczytaj interfejs Maps JavaScript API

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

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

  3. Podaj identyfikator mapy podczas jej tworzenia 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 lub przekazywany jest nieprawidłowy identyfikator mapy, nie można wczytać znaczników zaawansowanych. W ramach rozwiązywania problemów możesz dodać detektor mapcapabilities_changed, aby zasubskrybować zmiany w możliwościach mapy. Sygnalizuje ona, czy zostały spełnione te warunki:

  • Prawidłowy identyfikator mapy jest już używany.
  • Jeśli używane są obiekty wymagające mapy wektorowej, identyfikator mapy jest powiązany z mapą wektorową.

Korzystanie z funkcji map jest opcjonalne i zalecane tylko do testowania i rozwiązywania problemów lub na potrzeby kreacji zastępczych w czasie działania.

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