고급 마커를 사용하면 성능이 뛰어난 마커를 만들고 맞춤설정할 수 있으며 새로운 마커 기능을 사용할 수 있습니다. 고급 마커를 사용하면 기본 마커의 배경, 테두리, 글리프 색상을 맞춤설정하고 마커 크기를 조정하고 기본 마커 아이콘을 맞춤 그래픽 이미지로 대체할 수 있습니다. DOM 클릭 이벤트 및 키보드 입력에 반응하는 마커를 만들 수 있습니다. 고급 마커는 완전한 맞춤 마커를 만드는 기능을 비롯해 맞춤 HTML 및 CSS 사용을 지원해 한층 더 세부적인 맞춤설정이 가능합니다. 3D 애플리케이션의 경우 마커가 표시되는 고도를 조정할 수 있습니다. 고급 마커는 래스터 및 벡터 지도에서 모두 사용할 수 있습니다(지도 ID 필요).
색상, 크기, 아이콘 이미지 맞춤설정
기본 마커의 배경, 글리프, 테두리 색상을 맞춤설정하고 마커 크기를 조정합니다.
기본 마커 아이콘을 맞춤 SVG 또는 PNG 이미지로 대체합니다.
맞춤 HTML 마커 만들기
맞춤 HTML 및 CSS를 사용하여 눈에 띄는 대화형 마커를 만들고 애니메이션을 만듭니다.
마커가 클릭 및 키보드 이벤트에 반응하도록 설정
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 markerView = new google.maps.marker.AdvancedMarkerView({ map, position: {lat: 37.4239163, lng: -122.0947209}, }); markerView.addListener('click', ({domEvent, latLng}) => { const {target} = domEvent; // Handle the click event. // ... }); }
마커 고도 및 충돌 동작 설정
마커가 3D 지도 요소와 함께 올바르게 표시되도록 고도를 설정하고, 마커가 다른 마커 또는 지도 라벨과 충돌할 때의 동작을 지정합니다. 마커 고도는 벡터 지도에서만 설정할 수 있습니다.