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 używać znaczników zaawansowanych, musisz mieć projekt Cloud 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 artykule o dostosowywaniu w chmurze. Ustaw typ mapy na JavaScript i wybierz opcję Wektorowa lub Rastrowa.

Tworzenie identyfikatora mapy wektorowej

Aktualizowanie kodu inicjowania mapy

Wymaga to utworzonego właśnie identyfikatora mapy. Znajdziesz go na stronie Zarządzanie mapami.

  1. Wczytaj Maps JavaScript API.

  2. W razie potrzeby wczytaj bibliotekę znaczników zaawansowanych z 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 brakuje identyfikatora mapy, nie można wczytać znaczników zaawansowanych. 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 do celów 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

Dodawanie znacznika do mapy