마커

마커를 사용하여 지도상의 한 위치로 사용자의 주의를 끕니다. 이 가이드에서는 3D 지도에서 마커를 사용하고 맞춤설정하는 방법을 설명합니다. 마커가 표시되는 고도 외에도 마커의 모양, 크기, 색상을 조정할 수 있습니다.

마커를 사용하여 지도에 위치를 표시합니다. 위의 예에서는 맞춤설정이 적용되지 않은 기본 단일 마커를 보여줍니다.

색상, 크기, 아이콘 이미지 맞춤설정

기본 마커의 배경, 글리프, 테두리 색상, 크기를 맞춤설정합니다.

맞춤 마커

기본 마커 아이콘을 맞춤 SVG 리소스로 대체합니다.

그래픽이 있는 마커

마커 고도 설정

마커를 돌출하고 고도를 설정하여 마커 고도를 설정할 수 있습니다.

돌출된 마커

마커가 클릭 및 키보드 이벤트에 반응하도록 설정

click 이벤트 리스너를 추가하여 마커가 클릭 및 키보드 이벤트에 반응하도록 설정합니다.

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

마커 충돌 동작 설정

마커가 다른 마커 또는 지도 라벨과 충돌할 때의 동작을 지정합니다.

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

다음 단계