Rozpocznij

Wybierz platformę: Android iOS JavaScript

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

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

Zanim zaczniesz korzystać z zaawansowanych markerów, musisz mieć projekt w Cloud z kontem rozliczeniowym i włączonym interfejsem Maps JavaScript API. Więcej informacji znajdziesz w artykule Konfigurowanie projektu Google Cloud.

Pobieranie 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 identyfikatora mapy, który został utworzony. Znajdziesz ją na stronie Zarządzanie Mapami.

  1. Wczytaj Maps JavaScript API.

  2. W razie potrzeby wczytaj bibliotekę zaawansowanych znaczników w 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'
});

Sprawdzanie możliwości mapy (opcjonalnie)

Zaawansowane znaczniki wymagają identyfikatora mapy. Jeśli identyfikator mapy jest nieprawidłowy, zaawansowane znaczniki nie mogą się wczytać. W ramach rozwiązywania problemów możesz dodać mapcapabilities_changed odbiornik, aby subskrybować zmiany w funkcjach mapy. Korzystanie z funkcji Map jest opcjonalne i zalecane tylko do celów testowych i rozwiązywania problemów lub do celów rezerwowych 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 zaawansowanego markera