마커

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

Maps JavaScript의 3D 지도는 두 가지 마커 클래스를 제공하며, 각 클래스는 특정 용도에 맞게 최적화되어 있습니다. 다음 표에서는 사용 가능한 두 클래스 간의 차이점과 장단점을 보여줍니다.

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

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

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

맞춤 마커

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

그래픽이 있는 마커

마커 고도 설정

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

돌출 마커

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

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

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});

마커 충돌 동작 설정

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

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

마커 성능

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

다음 단계