Advanced Markers

AdvancedMarkerElement 클래스

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

지도에 위치를 표시합니다. AdvancedMarkerElement를 표시하려면 position를 설정해야 합니다.

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>

const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");

생성자
AdvancedMarkerElement	AdvancedMarkerElement([options]) 매개변수: options: AdvancedMarkerElementOptions optional 지정된 옵션으로 AdvancedMarkerElement를 만듭니다. 지도가 지정되면 생성 시 AdvancedMarkerElement가 지도에 추가됩니다.

속성
anchorLeft attr: anchor-left	유형: string optional 기본값: '-50%' 마커의 왼쪽 상단에서 마커의 기준점을 오프셋하는 데 사용되는 CSS 길이 백분율 값입니다. 이는 기본 마커의 일반적인 하단 중앙 지점과 다른 기준점이 있는 시각적 요소를 사용할 때 유용합니다. HTML 속성: anchor-left="string"
anchorTop attr: anchor-top	유형: string optional 기본값: '-100%' 마커의 왼쪽 상단에서 마커의 기준점을 오프셋하는 데 사용되는 CSS 길이 백분율 값입니다. 이는 기본 마커의 일반적인 하단 중앙 지점과 다른 기준점이 있는 시각적 요소를 사용할 때 유용합니다. HTML 속성: anchor-top="string"
collisionBehavior	유형: CollisionBehavior optional AdvancedMarkerElementOptions.collisionBehavior를 참조하세요.
gmpClickable attr: gmp-clickable	유형: boolean optional AdvancedMarkerElementOptions.gmpClickable를 참조하세요. HTML 속성: gmp-clickable
gmpDraggable	유형: boolean optional AdvancedMarkerElementOptions.gmpDraggable를 참조하세요.
map	유형: Map optional AdvancedMarkerElementOptions.map를 참조하세요.
position attr: position	유형: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional AdvancedMarkerElementOptions.position를 참조하세요. HTML 속성: position="lat,lng" position="lat,lng,altitude"
title attr: title	유형: string AdvancedMarkerElementOptions.title를 참조하세요. HTML 속성: title="string"
zIndex	유형: number optional AdvancedMarkerElementOptions.zIndex를 참조하세요.
element readonly	지원 중단됨: AdvancedMarkerElement를 직접 사용하세요. 유형: HTMLElement 이 필드는 읽기 전용입니다. 뷰를 지원하는 DOM 요소입니다.
content	지원 중단됨: 대신 .children을 사용하세요. 유형: Node optional AdvancedMarkerElementOptions.content를 참조하세요.

메서드
addListener	addListener(eventName, handler) 매개변수: eventName: string 관측 이벤트 handler: 이벤트를 처리하는 Function 함수입니다. 반환 값: MapsEventListener 결과 이벤트 리스너입니다. 지도 이벤트 시스템의 지정된 이벤트 이름에 지정된 리스너 함수를 추가합니다.
상속됨: addEventListener, removeEventListener

이벤트
click	function(event) 인수: event: MapMouseEvent 이 이벤트는 AdvancedMarkerElement 요소를 클릭하면 실행됩니다. addEventListener()에서는 사용할 수 없습니다(대신 gmp-click 사용).
drag	function(event) 인수: event: MapMouseEvent 이 이벤트는 사용자가 AdvancedMarkerElement를 드래그하는 동안 반복적으로 실행됩니다. addEventListener()에서는 사용할 수 없습니다.
dragend	function(event) 인수: event: MapMouseEvent 이 이벤트는 사용자가 AdvancedMarkerElement 드래그를 중지하면 실행됩니다. addEventListener()에서는 사용할 수 없습니다.
dragstart	function(event) 인수: event: MapMouseEvent 이 이벤트는 사용자가 AdvancedMarkerElement을 드래그하기 시작할 때 실행됩니다. addEventListener()에서는 사용할 수 없습니다.
gmp-click	function(event) 인수: event: AdvancedMarkerClickEvent 이 이벤트는 AdvancedMarkerElement 요소를 클릭하면 실행됩니다. addListener() 대신 addEventListener()와 함께 사용하는 것이 가장 좋습니다.

AdvancedMarkerElementOptions 인터페이스

google.maps.marker.AdvancedMarkerElementOptions 인터페이스

AdvancedMarkerElement를 구성하기 위한 옵션입니다.

속성
anchorLeft 선택사항	유형: string optional 기본값: '-50%' 마커의 왼쪽 상단에서 마커의 기준점을 오프셋하는 데 사용되는 CSS 길이 백분율 값입니다. 이는 기본 마커의 일반적인 하단 중앙 지점과 다른 기준점이 있는 시각적 요소를 사용할 때 유용합니다.
anchorTop 선택사항	유형: string optional 기본값: '-100%' 마커의 왼쪽 상단에서 마커의 기준점을 오프셋하는 데 사용되는 CSS 길이 백분율 값입니다. 이는 기본 마커의 일반적인 하단 중앙 지점과 다른 기준점이 있는 시각적 요소를 사용할 때 유용합니다.
collisionBehavior 선택사항	유형: CollisionBehavior optional AdvancedMarkerElement가 다른 AdvancedMarkerElement 또는 벡터 지도의 기본 지도 라벨과 충돌할 때의 동작을 지정하는 열거형입니다. 참고: AdvancedMarkerElement와 AdvancedMarkerElement의 충돌은 래스터 지도와 벡터 지도 모두에서 작동하지만, AdvancedMarkerElement와 기본 지도의 라벨 충돌은 벡터 지도에서만 작동합니다.
content 선택사항	유형: Node optional 기본값: PinElement AdvancedMarkerElement의 시각적 요소를 지원하는 DOM 요소입니다. 참고: AdvancedMarkerElement는 전달된 DOM 요소를 클론하지 않습니다. DOM 요소가 AdvancedMarkerElement에 전달되면 동일한 DOM 요소를 다른 AdvancedMarkerElement에 전달하면 DOM 요소가 이동하고 이전 AdvancedMarkerElement가 비어 있는 것처럼 보입니다.
gmpClickable 선택사항	유형: boolean optional 기본값: false true이면 AdvancedMarkerElement가 클릭 가능하고 gmp-click 이벤트를 트리거하며, 접근성 목적으로 상호작용이 가능하게 됩니다 (예: 화살표 키를 통한 키보드 탐색 허용).
gmpDraggable 선택사항	유형: boolean optional 기본값: false true이면 AdvancedMarkerElement를 드래그할 수 있습니다. 참고: 고도가 있는 AdvancedMarkerElement는 드래그할 수 없습니다.
map 선택사항	유형: Map optional AdvancedMarkerElement를 표시할 지도입니다. AdvancedMarkerElement를 표시하려면 지도가 필요하며, 생성 시 제공되지 않은 경우 AdvancedMarkerElement.map를 설정하여 제공할 수 있습니다.
position 선택사항	유형: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional AdvancedMarkerElement의 위치를 설정합니다. AdvancedMarkerElement는 위치 없이 구성할 수 있지만, 사용자의 작업이나 선택 등에 의해 위치가 제공될 때까지 표시되지 않습니다. AdvancedMarkerElement의 위치는 생성 시 제공되지 않은 경우 AdvancedMarkerElement.position를 설정하여 제공할 수 있습니다. 참고: 고도가 있는 AdvancedMarkerElement는 벡터 지도에서만 지원됩니다.
title 선택사항	유형: string optional 텍스트를 롤오버합니다. 제공된 경우 접근성 텍스트 (예: 스크린 리더와 함께 사용)가 제공된 값과 함께 AdvancedMarkerElement에 추가됩니다.
zIndex 선택사항	유형: number optional 모든 AdvancedMarkerElement가 zIndex 순으로 지도에 표시되며 값이 더 큰 AdvancedMarkerElement가 값이 더 작은 AdvancedMarkerElement 앞에 표시됩니다. 기본적으로 AdvancedMarkerElement는 화면의 수직 위치에 따라 표시되며, 화면 아래쪽에 있는 AdvancedMarkerElement가 화면 위쪽에 있는 AdvancedMarkerElement 앞에 표시됩니다. 명시적인 zIndex가 있는 마커와 없는 마커를 혼합하면 예기치 않은 시각적 결과가 발생할 수 있습니다. 예측 가능한 동작을 보장하려면 모든 마커에 zIndex를 설정하거나 설정하지 않은 상태로 두는 것이 좋습니다. zIndex는 CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY 고급 마커 간의 상대적인 우선순위를 결정하는 데도 사용됩니다. zIndex 값이 클수록 우선순위가 더 높습니다.

AdvancedMarkerClickEvent 클래스

google.maps.marker.AdvancedMarkerClickEvent class
extends Event
library "marker"

이 이벤트는 고급 마커를 클릭하면 생성됩니다. event.target.position를 사용하여 마커의 위치에 액세스합니다.

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

PinElement 클래스

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

PinElement는 도형과 글리프로 구성된 DOM 요소를 나타냅니다. 도형은 기본 AdvancedMarkerElement 또는 Marker3DElement에 표시된 것과 동일한 풍선 스타일을 갖습니다. 글리프는 풍선 모양으로 표시되는 선택적 DOM 요소입니다. PinElement는 PinElement.scale에 따라 가로세로 비율이 다를 수 있습니다.

const {PinElement} = await google.maps.importLibrary("marker");

생성자
PinElement	PinElement([options]) 매개변수: options: PinElementOptions optional

속성
background	유형: string optional 핀 모양의 배경 색상입니다. PinElementOptions.background를 참조하세요.
borderColor	유형: string optional 핀 모양의 테두리 색상입니다. PinElementOptions.borderColor를 참조하세요.
glyphColor	유형: string optional 핀 글리프의 색상입니다. PinElementOptions.glyphColor를 참조하세요.
glyphSrc	유형: URL|string optional 핀에 표시할 글리프 이미지의 소스입니다. PinElementOptions.glyphSrc를 참조하세요.
glyphText	유형: string optional 핀에 표시되는 텍스트입니다. PinElementOptions.glyphText를 참조하세요.
scale	유형: number optional PinElementOptions.scale를 참조하세요.
element readonly	지원 중단됨: PinElement를 직접 사용하세요. 유형: HTMLElement 이 필드는 읽기 전용입니다. 뷰를 지원하는 DOM 요소입니다.
glyph	지원 중단됨: 대신 PinElementOptions.glyphText 또는 PinElementOptions.glyphSrc를 사용하세요. 유형: string|Element|URL optional PinElementOptions.glyph를 참조하세요.

메서드
상속됨: addEventListener, removeEventListener

PinElementOptions 인터페이스

google.maps.marker.PinElementOptions 인터페이스

PinElement를 만들기 위한 옵션입니다.

속성
background 선택사항	유형: string optional 핀 모양의 배경 색상입니다. 모든 CSS 색상 값을 지원합니다.
borderColor 선택사항	유형: string optional 핀 모양의 테두리 색상입니다. 모든 CSS 색상 값을 지원합니다.
glyph 선택사항	지원 중단됨: 대신 PinElementOptions.glyphText 또는 PinElementOptions.glyphSrc를 사용하세요. 유형: string|Element|URL optional 핀에 표시되는 DOM 요소입니다.
glyphColor 선택사항	유형: string optional 글리프의 색상입니다. 모든 CSS 색상 값을 지원합니다.
glyphSrc 선택사항	유형: URL|string optional 핀에 표시할 글리프 이미지의 소스입니다.
glyphText 선택사항	유형: string optional 핀에 표시되는 텍스트입니다.
scale 선택사항	유형: number optional 기본값: 1 핀의 배율입니다.