마커

마커를 사용하여 지도에서 위치에 사용자의 주의를 끌 수 있습니다. 이 가이드에서는 3D 지도에서 마커를 사용하고 맞춤설정하는 방법을 보여줍니다. 마커가 표시되는 고도 외에도 마커의 모양, 크기, 색상을 제어할 수 있습니다. 다음 예는 기본 마커를 보여줍니다.

Maps JavaScript의 3D 지도에서는 각각 특정 용도에 최적화된 두 가지 마커 클래스를 제공합니다. 다음 표에서는 사용 가능한 두 클래스 간의 차이점과 트레이드오프를 보여줍니다.

기능 MarkerElement Marker3DElement
맞춤설정 높음 (맞춤 HTML 요소, 핵심 애니메이션 API 등을 지원함) 낮음 (맞춤설정 가능성이 낮음)
성능 상호작용 성능 저하 (마커가 많을수록 FPS가 떨어짐) 상호작용 성능 향상 (대규모 데이터 세트 렌더링에 최적화됨)
권장 용량 최대 1,000개 마커까지 안정적인 상호작용 성능 1,000개가 넘는 마커를 처리하는 데 권장됩니다.

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

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

맞춤 마커

기본 마커 아이콘을 맞춤 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
});

마커 실적

맞춤 HTML 마커 (MarkerElement)는 표준 3D 마커 (Marker3DElement)보다 성능이 낮습니다. 마커가 1,000개를 초과하는 애플리케이션의 경우 최적의 성능을 위해 Marker3dElement 클래스를 사용하는 것이 좋습니다.

다음 단계