Dzięki zaawansowanym znacznikom możesz tworzyć i dostosowywać bardzo skuteczne znaczniki. Dostosuj tło, obramowanie i kolor glifu domyślnego znacznika, dostosuj rozmiar znacznika i zastąp domyślną ikonę znacznika własną grafiką. Możesz utworzyć dostępne znaczniki, które reagują na zdarzenia kliknięcia DOM i wprowadzanie tekstu z klawiatury. Aby uzyskać jeszcze dokładniejsze dostosowywanie, znaczniki zaawansowane obsługują korzystanie z niestandardowego kodu HTML i CSS, w tym możliwość tworzenia znaczników niestandardowych. W przypadku aplikacji 3D można kontrolować wysokość, na której wyświetla się znacznik. Zaawansowane znaczniki są obsługiwane zarówno w mapach rastrowych, jak i wektorowych (wymagany jest identyfikator mapy).
Pierwsze kroki z zaawansowanymi znacznikami
Dostosuj kolor, skalę i obraz ikony
Dostosuj kolor tła, glifu i obramowania domyślnego znacznika oraz dostosuj rozmiar znacznika.
Zastąp domyślną ikonę znacznika niestandardowym obrazem w formacie SVG lub PNG.
Tworzenie niestandardowych znaczników HTML
Użyj niestandardowego kodu HTML i CSS, aby tworzyć charakterystyczne wizualnie znaczniki interaktywne i tworzyć animacje.
Znaczniki będą reagowały na zdarzenia kliknięcia i klawiatury
Jeśli chcesz, by znacznik odpowiadał na kliknięcia i zdarzenia klawiatury, dodaj detektor zdarzeń click
.
function initMap() { const map = new google.maps.Map(document.getElementById('map'), { center: {lat: 37.4239163, lng: -122.0947209}, zoom: 17, mapId: 'DEMO_MAP_ID', }); const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: {lat: 37.4239163, lng: -122.0947209}, }); marker.addListener('click', ({domEvent, latLng}) => { const {target} = domEvent; // Handle the click event. // ... }); }
Ustaw wysokość znacznika i zachowanie przy kolizji
Ustaw wysokość znacznika, aby prawidłowo wyświetlał się w elementach mapy 3D, oraz określ zachowanie znacznika w przypadku zderzenia z innym znacznikiem lub etykietą mapy. Wysokość znacznika jest obsługiwana tylko na mapach wektorowych.