Aby skonfigurować zaawansowane znaczniki, wykonaj te czynności.
Uzyskiwanie 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.
Aktualizowanie kodu inicjalizacji mapy
Wymaga to identyfikatora mapy, który został przez Ciebie utworzony. Znajdziesz go na stronie Zarządzanie Mapami.
W razie potrzeby wczytaj bibliotekę zaawansowanych znaczników z poziomu funkcji
async:const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
Podaj identyfikator mapy, gdy utworzysz jej instancję za pomocą właściwości
mapId. Może to być podany przez Ciebie identyfikator mapy lubDEMO_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 mapie. 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. } });