Advanced Markers

AdvancedMarkerElement 클래스

google.maps.marker.AdvancedMarkerElement 클래스

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

참고: 웹 구성요소로서의 사용 (예: 맞춤 <gmp-advanced-marker> HTML 요소 사용, v=beta 채널에서만 사용 가능)

맞춤 요소:
<gmp-advanced-marker 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가 생성 시 지도에 추가됩니다.

속성
collisionBehavior	유형:  CollisionBehavior optional AdvancedMarkerElementOptions.collisionBehavior를 참조하세요.
content	유형:  Node optional AdvancedMarkerElementOptions.content를 참조하세요.
element	유형:  HTMLElement 이 필드는 읽기 전용입니다. 뷰를 지원하는 DOM 요소입니다.
gmpClickable	참고: v=beta 채널에서만 사용할 수 있습니다. 유형:  boolean optional AdvancedMarkerElementOptions.gmpClickable를 참조하세요.
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를 참조하세요.

메서드
addEventListener	참고: v=beta 채널에서만 사용할 수 있습니다. 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	참고: v=beta 채널에서만 사용할 수 있습니다. 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	참고: v=beta 채널에서만 사용할 수 있습니다. function(event) 인수:  event:  AdvancedMarkerClickEvent 이 이벤트는 AdvancedMarkerElement 요소가 클릭될 때 실행됩니다. addListener() 대신 addEventListener()와 함께 사용하는 것이 가장 좋습니다.

AdvancedMarkerElementOptions 인터페이스

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

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

속성
collisionBehavior optional	유형:  CollisionBehavior optional AdvancedMarkerElement가 다른 AdvancedMarkerElement 또는 벡터 지도의 기본 지도 라벨과 충돌할 때의 동작을 지정하는 열거형입니다. 참고: AdvancedMarkerElement와 AdvancedMarkerElement의 충돌은 래스터 지도와 벡터 지도 모두에서 작동하지만, AdvancedMarkerElement와 기본 지도의 라벨 충돌은 벡터 지도에서만 작동합니다.
content optional	유형:  Node optional 기본값: PinElement.element AdvancedMarkerElement의 시각적 요소를 지원하는 DOM 요소입니다. 참고: AdvancedMarkerElement는 전달된 DOM 요소를 클론하지 않습니다. DOM 요소가 AdvancedMarkerElement에 전달되면 동일한 DOM 요소를 다른 AdvancedMarkerElement에 전달하면 DOM 요소가 이동하고 이전 AdvancedMarkerElement가 비어 있는 것처럼 보입니다.
gmpClickable optional	참고: v=beta 채널에서만 사용할 수 있습니다. 유형:  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.position를 설정하여 AdvancedMarkerElement의 위치를 제공할 수 있습니다. 참고: 고도가 있는 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 클래스

참고: v=beta 채널에서만 사용할 수 있습니다.

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

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

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

PinElement 클래스

google.maps.marker.PinElement 클래스

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

참고: 웹 구성요소로서의 사용 (예: HTMLElement 서브클래스로 사용 또는 HTML을 통한 사용)은 아직 지원되지 않습니다.

이 클래스는 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를 참조하세요.
element	유형:  HTMLElement 이 필드는 읽기 전용입니다. 뷰를 지원하는 DOM 요소입니다.
glyph	유형:  string|Element|URL optional PinElementOptions.glyph를 참조하세요.
glyphColor	유형:  string optional PinElementOptions.glyphColor를 참조하세요.
scale	유형:  number optional PinElementOptions.scale를 참조하세요.

메서드
addEventListener	참고: v=beta 채널에서만 사용할 수 있습니다. addEventListener(type, listener[, options]) 매개변수:  type:  string listener:  EventListener|EventListenerObject options:  boolean|AddEventListenerOptions optional 반환 값:  void 이 함수는 아직 사용할 수 없습니다.
removeEventListener	참고: v=beta 채널에서만 사용할 수 있습니다. 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	유형:  string|Element|URL optional 핀에 표시되는 DOM 요소입니다.
glyphColor optional	유형:  string optional 글리프의 색상입니다. 모든 CSS 색상 값을 지원합니다.
scale optional	유형:  number optional 기본값: 1 핀의 크기입니다.