Rozpocznij

Wybierz platformę: Android iOS JavaScript

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

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

Zanim zaczniesz korzystać z zaawansowanych znaczników, musisz mieć projekt w chmurze 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 sekcji Dostosowywanie w chmurze. Ustaw Typ mapy na JavaScript i wybierz opcję Wektorowa lub Rastrowa.

Tworzenie identyfikatora mapy wektorowej

Aktualizowanie kodu inicjowania mapy

Wymaga to utworzonego przez Ciebie identyfikatora mapy. Znajdziesz go na stronie Zarządzanie mapami.

  1. Wczytaj Maps JavaScript API.

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

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

  3. Podczas tworzenia instancji mapy podaj identyfikator mapy za pomocą właściwości mapId. Może to być identyfikator mapy podany przez Ciebie 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'
});

Sprawdzanie możliwości mapy (opcjonalnie)

Zaawansowane znaczniki wymagają identyfikatora mapy. Jeśli identyfikator mapy jest nieprawidłowy, zaawansowane znaczniki nie mogą się wczytać. Aby rozwiązać ten problem, możesz dodać detektor mapcapabilities_changed, aby subskrybować zmiany możliwości mapy. Korzystanie z możliwości mapy jest opcjonalne i zalecane tylko na potrzeby testowania i rozwiązywania problemów lub na potrzeby rezerwowe 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

Dodawanie znacznika do mapy