Rozpocznij

Wybierz platformę: Android iOS JavaScript

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

Pobieranie 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.

Pobieranie klucza interfejsu API

Tworzenie identyfikatora mapy

Aby utworzyć nowy identyfikator mapy, wykonaj czynności opisane w artykule Personalizacja usługi w chmurze. Ustaw typ mapy na JavaScript i wybierz opcję Wektor lub Rastrowa.

Tworzenie identyfikatora 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. W razie potrzeby wczytaj bibliotekę zaawansowanych znaczników z poziomu funkcji async:

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

  3. Podaj identyfikator mapy, gdy utworzysz jej instancję 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 brakuje identyfikatora mapy, zaawansowane znaczniki nie będą się wczytywać. Aby rozwiązać problem, możesz dodać listenera mapcapabilities_changed, aby subskrybować zmiany w możliwościach mapy. Korzystanie z możliwości map jest opcjonalne i zalecane tylko do celów testowania i rozwiązywania problemów lub do celów zastępowania w czasie wykonywania.

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