Advanced Markers

AdvancedMarkerElement 클래스

google.maps.marker.AdvancedMarkerElement 클래스

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

맞춤 요소:
<gmp-advanced-marker anchor-left="string" anchor-top="string" gmp-clickable position="lat,lng" title="string"></gmp-advanced-marker>

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 AdvancedMarkerElementOptions를 구현합니다.

const {AdvancedMarkerElement} = await google.maps.importLibrary("marker")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.

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

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

메서드
addEventListener	addEventListener(type, listener[, options]) 매개변수:  type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다. listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다. options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다. 반환 값:  void 지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
addListener	addListener(eventName, handler) 매개변수:  eventName:  string 관측된 이벤트입니다. handler:  Function 이벤트를 처리하는 함수입니다. 반환 값:  MapsEventListener 결과 이벤트 리스너입니다. 지도 이벤트 시스템의 지정된 이벤트 이름에 지정된 리스너 함수를 추가합니다.
removeEventListener	removeEventListener(type, listener[, options]) 매개변수:  type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다. listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다. options:  boolean|EventListenerOptions optional 옵션을 참고하세요. 반환 값:  void 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 optional	유형:  string optional 기본값: '-50%' 마커의 왼쪽 상단에서 마커의 기준점을 오프셋하는 데 사용되는 CSS 길이 백분율 값입니다. 이는 기본 마커의 일반적인 하단 중앙 지점과 다른 기준점이 있는 시각적 요소를 사용할 때 유용합니다.
anchorTop optional	유형:  string optional 기본값: '-100%' 마커의 왼쪽 상단에서 마커의 기준점을 오프셋하는 데 사용되는 CSS 길이 백분율 값입니다. 이는 기본 마커의 일반적인 하단 중앙 지점과 다른 기준점이 있는 시각적 요소를 사용할 때 유용합니다.
collisionBehavior optional	유형:  CollisionBehavior optional AdvancedMarkerElement가 다른 AdvancedMarkerElement 또는 벡터 지도의 기본 지도 라벨과 충돌할 때의 동작을 지정하는 열거형입니다. 참고: AdvancedMarkerElement와 AdvancedMarkerElement의 충돌은 래스터 지도와 벡터 지도 모두에서 작동하지만, AdvancedMarkerElement와 기본 지도의 라벨 충돌은 벡터 지도에서만 작동합니다.
content optional	유형:  Node optional 기본값: PinElement AdvancedMarkerElement의 시각적 요소를 지원하는 DOM 요소입니다. 참고: AdvancedMarkerElement는 전달된 DOM 요소를 클론하지 않습니다. DOM 요소가 AdvancedMarkerElement에 전달되면 동일한 DOM 요소를 다른 AdvancedMarkerElement에 전달하면 DOM 요소가 이동하고 이전 AdvancedMarkerElement가 비어 있는 것처럼 보입니다.
gmpClickable optional	유형:  boolean optional 기본값: false true이면 AdvancedMarkerElement가 클릭 가능하고 gmp-click 이벤트를 트리거하며, 접근성 목적으로 상호작용이 가능하게 됩니다 (예: 화살표 키를 통한 키보드 탐색 허용).
gmpDraggable optional	유형:  boolean optional 기본값: false true이면 AdvancedMarkerElement를 드래그할 수 있습니다. 참고: 고도가 있는 AdvancedMarkerElement는 드래그할 수 없습니다.
map optional	유형:  Map optional AdvancedMarkerElement를 표시할 지도입니다. AdvancedMarkerElement를 표시하려면 지도가 필요하며, 생성 시 제공되지 않은 경우 AdvancedMarkerElement.map를 설정하여 제공할 수 있습니다.
position optional	유형:  LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional AdvancedMarkerElement의 위치를 설정합니다. AdvancedMarkerElement는 위치 없이 구성할 수 있지만, 사용자의 작업이나 선택 등에 의해 위치가 제공될 때까지 표시되지 않습니다. AdvancedMarkerElement의 위치는 생성 시 제공되지 않은 경우 AdvancedMarkerElement.position를 설정하여 제공할 수 있습니다. 참고: 고도가 있는 AdvancedMarkerElement는 벡터 지도에서만 지원됩니다.
title optional	유형:  string optional 텍스트를 롤오버합니다. 제공된 경우 접근성 텍스트 (예: 스크린 리더와 함께 사용)가 제공된 값과 함께 AdvancedMarkerElement에 추가됩니다.
zIndex optional	유형:  number optional 모든 AdvancedMarkerElement가 zIndex 순으로 지도에 표시되며 값이 더 큰 AdvancedMarkerElement가 값이 더 작은 AdvancedMarkerElement 앞에 표시됩니다. 기본적으로 AdvancedMarkerElement는 화면의 수직 위치에 따라 표시되며, 화면 아래쪽에 있는 AdvancedMarkerElement가 화면 위쪽에 있는 AdvancedMarkerElement 앞에 표시됩니다. zIndex는 CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY 고급 마커 간의 상대적인 우선순위를 결정하는 데도 사용됩니다. zIndex 값이 클수록 우선순위가 더 높습니다.

AdvancedMarkerClickEvent 클래스

google.maps.marker.AdvancedMarkerClickEvent 클래스

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

이 클래스는 Event를 확장합니다.

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.

PinElement 클래스

google.maps.marker.PinElement 클래스

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

이 클래스는 HTMLElement를 확장합니다.

이 클래스는 PinElementOptions를 구현합니다.

const {PinElement} = await google.maps.importLibrary("marker")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.

생성자
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	지원 중단됨: PinElement를 직접 사용하세요. 유형:  HTMLElement 이 필드는 읽기 전용입니다. 뷰를 지원하는 DOM 요소입니다.
glyph	지원 중단됨: 대신 PinElementOptions.glyphText 또는 PinElementOptions.glyphSrc를 사용하세요. 유형:  string|Element|URL optional PinElementOptions.glyph를 참조하세요.

메서드
addEventListener	addEventListener(type, listener[, options]) 매개변수:  type:  string 수신 대기할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다. listener:  EventListener|EventListenerObject 알림을 수신하는 객체입니다. handleEvent 메서드가 있는 함수 또는 객체여야 합니다. options:  boolean|AddEventListenerOptions optional 옵션을 참고하세요. 맞춤 이벤트는 capture 및 passive만 지원합니다. 반환 값:  void 지정된 이벤트가 타겟에 전달될 때마다 호출되는 함수를 설정합니다. addEventListener를 참고하세요.
removeEventListener	removeEventListener(type, listener[, options]) 매개변수:  type:  string 이벤트 리스너를 삭제할 이벤트 유형을 지정하는 문자열입니다. listener:  EventListener|EventListenerObject 이벤트 대상에서 삭제할 이벤트 핸들러의 이벤트 리스너입니다. options:  boolean|EventListenerOptions optional 옵션을 참고하세요. 반환 값:  void addEventListener로 이전에 등록된 이벤트 리스너를 타겟에서 삭제합니다. removeEventListener를 참고하세요.

PinElementOptions 인터페이스

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

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

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