Marker

Marker 클래스

google.maps.Marker 클래스

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

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

Marker
Marker([opts])
매개변수: 
  • optsMarkerOptions optional 이름이 지정된 선택적 인수
지정된 옵션으로 마커를 만듭니다. 지도를 지정하면 생성 시 지도에 마커가 추가됩니다. 마커를 표시하려면 위치를 설정해야 합니다.
MAX_ZINDEX API가 마커에 할당할 최대 기본 z-색인입니다. 높은 z-색인을 설정하여 마커를 앞으로 가져올 수 있습니다.
getAnimation
getAnimation()
매개변수: 없음
반환 값:  Animation|null|undefined
현재 실행 중인 애니메이션을 가져옵니다.
getClickable
getClickable()
매개변수: 없음
반환 값:  boolean 마커를 클릭할 수 있는 경우 true입니다.
Marker의 클릭 가능한 상태를 가져옵니다.
getCursor
getCursor()
매개변수: 없음
반환 값:  string|null|undefined
마우스 오버 시 표시되는 마우스 커서 유형을 가져옵니다.
getDraggable
getDraggable()
매개변수: 없음
반환 값:  boolean 마커를 드래그할 수 있는 경우 true입니다.
Marker의 드래그 가능한 상태를 가져옵니다.
getIcon
getIcon()
매개변수: 없음
반환 값:  string|Icon|Symbol|null|undefined
Marker 아이콘을 가져옵니다. MarkerOptions.icon 페이지를 참고하세요.
getLabel
getLabel()
매개변수: 없음
반환 값:  MarkerLabel|string|null|undefined
Marker의 라벨을 가져옵니다. MarkerOptions.label 페이지를 참고하세요.
getMap
getMap()
매개변수: 없음
반환 값:  Map|StreetViewPanorama
Marker가 렌더링된 지도 또는 파나로아마를 가져옵니다.
getOpacity
getOpacity()
매개변수: 없음
반환 값:  number|null|undefined 0.0~1.0 사이의 숫자
Marker의 불투명도를 가져옵니다.
getPosition
getPosition()
매개변수: 없음
반환 값:  LatLng|null|undefined
Marker의 위치를 가져옵니다.
getShape
getShape()
매개변수: 없음
반환 값:  MarkerShape|null|undefined
상호작용에 사용되는 Marker의 모양을 가져옵니다. MarkerOptions.shapeMarkerShape을 참고하세요.
getTitle
getTitle()
매개변수: 없음
반환 값:  string|null|undefined
Marker 도움말의 제목을 가져옵니다. MarkerOptions.title 페이지를 참고하세요.
getVisible
getVisible()
매개변수: 없음
반환 값:  boolean 마커가 표시되는 경우 true입니다.
Marker의 공개 상태를 가져옵니다.
getZIndex
getZIndex()
매개변수: 없음
반환 값: 마커의 number|null|undefined zIndex.
Marker의 zIndex를 가져옵니다. MarkerOptions.zIndex 페이지를 참고하세요.
setAnimation
setAnimation([animation])
매개변수: 
  • animationAnimation optional 재생할 애니메이션입니다.
반환 값: 없음
애니메이션을 시작합니다. 진행 중인 모든 애니메이션이 취소됩니다. 현재 지원되는 애니메이션은 Animation.BOUNCE, Animation.DROP입니다. null를 전달하면 모든 애니메이션이 중지됩니다.
setClickable
setClickable(flag)
매개변수: 
  • flagboolean true인 경우 마커를 클릭할 수 있습니다.
반환 값: 없음
Marker를 클릭할 수 있는지 설정합니다.
setCursor
setCursor([cursor])
매개변수: 
  • cursorstring optional 마우스 커서 유형입니다.
반환 값: 없음
마우스 오버 시 표시되는 마우스 커서 유형을 설정합니다.
setDraggable
setDraggable(flag)
매개변수: 
  • flagboolean optional true인 경우 마커를 드래그할 수 있습니다.
반환 값: 없음
Marker를 드래그할 수 있는지 설정합니다.
setIcon
setIcon([icon])
매개변수: 
반환 값: 없음
Marker의 아이콘을 설정합니다. MarkerOptions.icon 페이지를 참고하세요.
setLabel
setLabel([label])
매개변수: 
반환 값: 없음
Marker의 라벨을 설정합니다. MarkerOptions.label 페이지를 참고하세요.
setMap
setMap(map)
매개변수: 
반환 값: 없음
지정된 지도 또는 파노라마에서 Marker를 렌더링합니다. 지도를 null로 설정하면 마커가 삭제됩니다.
setOpacity
setOpacity([opacity])
매개변수: 
  • opacitynumber optional 0.0(투명)에서 1.0(불투명) 사이의 숫자입니다.
반환 값: 없음
Marker의 불투명도를 설정합니다.
setOptions
setOptions(options)
매개변수: 
반환 값: 없음
Marker의 옵션을 설정합니다.
setPosition
setPosition([latlng])
매개변수: 
반환 값: 없음
Marker의 게시물을 설정합니다.
setShape
setShape([shape])
매개변수: 
반환 값: 없음
상호작용에 사용되는 Marker의 모양을 설정합니다. MarkerOptions.shapeMarkerShape을 참고하세요.
setTitle
setTitle([title])
매개변수: 
  • titlestring optional
반환 값: 없음
Marker 도움말의 제목을 설정합니다. MarkerOptions.title 페이지를 참고하세요.
setVisible
setVisible(visible)
매개변수: 
  • visibleboolean true인 경우 마커가 표시됩니다.
반환 값: 없음
Marker가 표시되는지 여부를 설정합니다.
setZIndex
setZIndex([zIndex])
매개변수: 
  • zIndexnumber optional
반환 값: 없음
Marker의 zIndex를 설정합니다. MarkerOptions.zIndex 페이지를 참고하세요.
상속됨: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
animation_changed
function()
인수: 없음
이 이벤트는 Marker 애니메이션 속성이 변경되면 시작됩니다.
click
function(event)
인수: 
이 이벤트는 Marker 아이콘을 클릭하면 시작됩니다.
clickable_changed
function()
인수: 없음
이 이벤트는 Marker 클릭 가능한 속성이 변경되면 시작됩니다.
contextmenu
function(event)
인수: 
이 이벤트는 Marker에서 DOM 컨텍스트 메뉴 이벤트가 시작되면 시작됩니다.
cursor_changed
function()
인수: 없음
이 이벤트는 Marker 커서 속성이 변경되면 시작됩니다.
dblclick
function(event)
인수: 
이 이벤트는 Marker 아이콘을 더블클릭하면 시작됩니다.
drag
function(event)
인수: 
이 이벤트는 사용자가 Marker를 드래그하는 동안 반복적으로 실행됩니다.
dragend
function(event)
인수: 
이 이벤트는 사용자가 Marker 드래그를 중지하면 시작됩니다.
draggable_changed
function()
인수: 없음
이 이벤트는 Marker 드래그 가능 속성이 변경되면 시작됩니다.
dragstart
function(event)
인수: 
이 이벤트는 사용자가 Marker 드래그를 시작하면 실행됩니다.
flat_changed
function()
인수: 없음
이 이벤트는 Marker 플랫 속성이 변경되면 시작됩니다.
icon_changed
function()
인수: 없음
이 이벤트는 Marker 아이콘 속성이 변경되면 시작됩니다.
mousedown
function(event)
인수: 
이 이벤트는 Marker에서 마우스 다운 시 실행됩니다.
mouseout
function(event)
인수: 
이 이벤트는 마우스가 Marker 아이콘 영역을 벗어나면 시작됩니다.
mouseover
function(event)
인수: 
이 이벤트는 마우스가 Marker 아이콘의 영역으로 들어가면 시작됩니다.
mouseup
function(event)
인수: 
이 이벤트는 Marker에서 mouseup이 발생하면 실행됩니다.
position_changed
function()
인수: 없음
이 이벤트는 Marker 위치 속성이 변경되면 시작됩니다.
shape_changed
function()
인수: 없음
이 이벤트는 Marker 도형 속성이 변경되면 시작됩니다.
title_changed
function()
인수: 없음
이 이벤트는 Marker 제목 속성이 변경되면 시작됩니다.
visible_changed
function()
인수: 없음
이 이벤트는 표시되는 Marker 속성이 변경되면 시작됩니다.
zindex_changed
function()
인수: 없음
이 이벤트는 Marker zIndex 속성이 변경되면 시작됩니다.
rightclick
function(event)
인수: 
이 이벤트는 Marker를 마우스 오른쪽 버튼으로 클릭하면 실행됩니다.

MarkerOptions 인터페이스

google.maps.MarkerOptions 인터페이스

Marker에 설정할 수 있는 속성을 정의하는 데 사용되는 MarkerOptions 객체입니다.

anchorPoint optional
유형:  Point optional
마커의 위치에서 마커를 앵커로 사용하여 열린 InfoWindow의 꼭짓점까지의 오프셋입니다.
animation optional
유형:  Animation optional
기본값: null
마커가 지도에 추가되면 재생할 애니메이션입니다.
clickable optional
유형:  boolean optional
기본값: true
true인 경우 마커가 마우스 및 터치 이벤트를 수신합니다.
BetacollisionBehavior optional
유형:  string|CollisionBehavior optional
기본값: null
벡터 지도의 마커에 충돌 동작을 설정합니다.
crossOnDrag optional
유형:  boolean optional
기본값: true
false인 경우 드래그할 때 마커 아래에 표시되는 X표가 사용 중지됩니다.
cursor optional
유형:  string optional
기본값: pointer
마우스 오버 시 표시할 마우스 커서 유형입니다.
draggable optional
유형:  boolean optional
기본값: false
true인 경우 마커를 드래그할 수 있습니다.
icon optional
유형:  string|Icon|Symbol optional
전경 아이콘 문자열이 제공되면 문자열이 urlIcon인 것처럼 처리됩니다.
label optional
유형:  string|MarkerLabel optional
기본값: null
마커에 라벨을 추가합니다. 마커 라벨은 마커 안에 표시되는 문자 또는 숫자입니다. 라벨은 문자열이거나 MarkerLabel 객체일 수 있습니다. MarkerOptions.title가 제공되지 않고 제공되지 않으면 접근성 텍스트 (예: 스크린 리더와 함께 사용)가 제공된 라벨의 텍스트와 함께 마커에 추가됩니다. label는 현재 최적화되지 않은 마커의 접근성 텍스트에만 사용됩니다.
map optional
유형:  Map|StreetViewPanorama optional
마커를 표시할 지도입니다. 지도는 마커를 표시하는 데 필요하며 마커 생성 시 제공되지 않으면 Marker.setMap와 함께 제공될 수 있습니다.
opacity optional
유형:  number optional
기본값: 1.0
투명도 0.0에서 1.0 사이의 불투명 숫자입니다.
optimized optional
유형:  boolean optional
최적화하면 다수의 마커를 단일 정적 요소로 렌더링하므로 성능이 향상됩니다. 이는 많은 수의 마커가 필요한 경우에 유용합니다. 마커 최적화에 대해 자세히 알아보기
position optional
유형:  LatLng|LatLngLiteral optional
마커 위치를 설정합니다. 마커는 생성할 수 있지만 마커의 위치가 제공될 때까지(예: 사용자의 작업 또는 선택에 의해) 표시되지 않습니다. 마커 생성 시 제공되지 않으면 마커 위치를 Marker.setPosition로 제공할 수 있습니다.
shape optional
유형:  MarkerShape optional
드래그 또는 클릭에 사용되는 이미지 지도 영역 정의입니다.
title optional
유형:  string optional
기본값: undefined
텍스트를 롤오버합니다. 제공된 경우 접근성 텍스트 (예: 스크린 리더와 함께 사용)가 제공된 값으로 마커에 추가됩니다. title는 현재 최적화되지 않은 마커의 접근성 텍스트에만 사용됩니다.
visible optional
유형:  boolean optional
기본값: true
true인 경우 마커가 표시됩니다.
zIndex optional
유형:  number optional
모든 마커가 zIndex 순으로 지도에 표시되며, 값이 높은 마커가 값이 낮은 마커 앞에 표시됩니다. 기본적으로 마커는 수직 위치에 따라 화면에 표시되며 화면에서 위치가 낮은 마커가 위에 있는 마커 앞에 표시됩니다.

CollisionBehavior 상수

google.maps.CollisionBehavior 상수

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

OPTIONAL_AND_HIDES_LOWER_PRIORITY 마커가 다른 마커와 겹치지 않는 경우에만 마커를 표시합니다. 이 유형의 마커 두 개가 겹치는 경우 zIndex가 더 높은 마커가 표시됩니다. zIndex가 동일한 경우 세로 화면 위치가 더 낮은 인덱스가 표시됩니다.
REQUIRED 충돌과 관계없이 항상 마커를 표시합니다. 이것이 기본 동작입니다.
REQUIRED_AND_HIDES_OPTIONAL 충돌과 관계없이 항상 마커를 표시하고 마커와 겹치는 OPTIONAL_AND_HIDES_LOWER_PRIORITY 마커 또는 라벨을 숨깁니다.

Icon 인터페이스

google.maps.Icon 인터페이스

마커 아이콘 이미지를 나타내는 구조입니다.

url
유형:  string
이미지 또는 스프라이트 시트의 URL입니다.
anchor optional
유형:  Point optional
지도의 마커 위치에 대응하여 이미지를 고정할 위치입니다. 기본적으로 앵커는 이미지 하단의 중심점을 따라 위치합니다.
labelOrigin optional
유형:  Point optional
마커가 라벨을 제공하는 경우 아이콘 이미지의 왼쪽 상단 모서리를 기준으로 라벨의 원점입니다. 기본적으로 원점은 이미지의 중심점에 있습니다.
origin optional
유형:  Point optional
스프라이트 내 이미지의 위치입니다(있는 경우). 기본적으로 원점은 이미지 (0, 0)의 왼쪽 상단에 있습니다.
scaledSize optional
유형:  Size optional
크기 조정 후 전체 이미지의 크기입니다(있는 경우). 이 속성을 사용하여 이미지 또는 스프라이트를 늘리거나 축소합니다.
size optional
유형:  Size optional
스프라이트 또는 이미지의 표시 크기입니다. 스프라이트를 사용할 때는 스프라이트 크기를 지정해야 합니다. 크기를 제공하지 않으면 이미지가 로드될 때 설정됩니다.

MarkerLabel 인터페이스

google.maps.MarkerLabel 인터페이스

이 옵션은 마커 라벨의 모양을 지정합니다. 마커 라벨은 마커 안에 표시되는 문자열 (보통 단일 문자)입니다. 맞춤 마커와 함께 사용하는 경우 Icon 클래스의 labelOrigin 속성을 사용하여 위치를 변경할 수 있습니다.

text
유형:  string
라벨에 표시할 텍스트입니다.
className optional
유형:  string optional
기본값: '' (빈 문자열)
라벨 요소의 className 속성입니다 (요소의 클래스 속성과 같음). 공백으로 구분된 여러 CSS 클래스를 추가할 수 있습니다. 글꼴 색상, 크기, 두께, 모음은 MarkerLabel의 다른 속성을 통해서만 설정할 수 있습니다. 마커 충돌 관리를 사용하는 경우 CSS 클래스를 사용하여 라벨의 위치와 방향을 변경 (예: 변환 및 회전 사용)하면 안 됩니다.
color optional
유형:  string optional
기본값: 'black'
라벨 텍스트의 색상입니다.
fontFamily optional
유형:  string optional
라벨 텍스트의 글꼴 모음입니다 (CSS 글꼴 모음 속성과 동일).
fontSize optional
유형:  string optional
기본값: '14px'
라벨 텍스트의 글꼴 크기입니다 (CSS 글꼴 크기 속성과 동일).
fontWeight optional
유형:  string optional
라벨 텍스트의 글꼴 두께입니다 (CSS 글꼴 두께 속성과 동일).

MarkerShape 인터페이스

google.maps.MarkerShape 인터페이스

이 객체는 마커 이미지의 클릭 가능한 영역을 정의합니다. 도형은 이미지의 불투명 영역을 정의하는 두 가지 속성 typecoord로 구성됩니다.

coords
유형:  Array<number>
이 속성의 형식은 type 값에 따라 다르며 http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords에 있는 w3 AREA coords 사양을 따릅니다.
coords 속성은 대상 이미지 왼쪽 상단을 기준으로 도형의 픽셀 위치를 지정하는 정수 배열입니다. 좌표는 다음과 같이 type의 값에 따라 달라집니다.
- circle: coord는 [x1,y1,r]입니다. 여기서 x1,y2는 원의 중심 좌표이며 r은 원의 반경입니다.
- poly: coord는 [x1,y1,x2,y2...xn,yn]이며 각 x,y 쌍은 다각형의 한 꼭짓점에 대한 좌표를 포함합니다.
- rect: coord는 [x1,y1,x2,y2]입니다. 여기서 x1,y1은 직사각형 왼쪽 상단 모서리의 좌표이며 x2,y2는 직사각형의 오른쪽 하단 좌표입니다.
type
유형:  string
도형의 유형을 설명하며 circle, poly 또는 rect일 수 있습니다.

Symbol 인터페이스

google.maps.Symbol 인터페이스

스타일이 지정된 벡터 경로로 구성된 기호를 설명합니다. 기호를 마커의 아이콘으로 사용하거나 다중선에 배치할 수 있습니다.

path
유형:  SymbolPath|string
기호의 경로(기본 제공 기호 경로) 또는 SVG 경로 표기법을 사용하여 표현된 맞춤 경로입니다. 필수 항목입니다.
anchor optional
유형:  Point optional
기본값: google.maps.Point(0,0)
마커 또는 다중선을 기준으로 한 기호의 위치입니다. 기호의 경로 좌표는 앵커의 x 및 y 좌표를 기준으로 각각 왼쪽과 위쪽으로 변환됩니다. 이 위치는 기호의 경로와 동일한 좌표계로 표현됩니다.
fillColor optional
유형:  string optional
기호의 채우기 색상입니다. 확장되었으며 이름이 지정된 색상을 제외하고 모든 CSS3 색상이 지원됩니다. 기호 마커의 경우 기본값은 'black'입니다. 다중선에 표시되는 기호의 경우 기본적으로 해당 다중선의 획 색상으로 설정됩니다.
fillOpacity optional
유형:  number optional
기본값: 0
기호의 채우기 불투명도입니다.
labelOrigin optional
유형:  Point optional
기본값: google.maps.Point(0,0)
마커에서 라벨을 제공하는 경우 경로의 출발지를 기준으로 라벨의 출발지입니다. 원점은 기호의 경로와 동일한 좌표계로 표현됩니다. 이 속성은 다중선의 기호에 사용되지 않습니다.
rotation optional
유형:  number optional
기본값: 0
기호를 회전하는 각도로, 시계 방향의 도 단위로 표현됩니다. fixedRotationfalseIconSequence의 기호는 기호가 놓인 가장자리의 각도를 기준으로 회전합니다.
scale optional
유형:  number optional
기호의 크기가 조정되는 크기입니다. 기호 마커의 경우 기본값은 1이고, 배율 조정 후 기호의 크기는 무엇이든 가능합니다. 다중선에 있는 기호의 경우 이 값은 다중선의 획 두께로 기본 설정됩니다. 크기를 조정한 후 기호는 기호의 앵커를 중심으로 중앙에 있는 22픽셀 크기의 정사각형 안에 있어야 합니다.
strokeColor optional
유형:  string optional
기호의 획 색상입니다. 확장되었으며 이름이 지정된 색상을 제외하고 모든 CSS3 색상이 지원됩니다. 기호 마커의 경우 기본값은 'black'입니다. 다중선에 표시되는 기호의 경우 기본값은 다중선의 획 색상입니다.
strokeOpacity optional
유형:  number optional
기호의 획 불투명도입니다. 기호 마커의 경우 기본값은 1입니다. 다중선에 표시되는 기호의 경우 기본값은 다중선의 획 불투명도입니다.
strokeWeight optional
유형:  number optional
기본값: 기호의 Symbol.scale입니다.
기호의 획 두께입니다.

SymbolPath 상수

google.maps.SymbolPath 상수

내장 기호 경로

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

BACKWARD_CLOSED_ARROW 뒤쪽을 가리키는 닫힌 화살표
BACKWARD_OPEN_ARROW 뒤쪽을 가리키는 열린 화살표
CIRCLE
FORWARD_CLOSED_ARROW 앞쪽을 가리키는 닫힌 화살표
FORWARD_OPEN_ARROW 앞쪽을 가리키는 열린 화살표

Animation 상수

google.maps.Animation 상수

마커에서 재생될 수 있는 애니메이션입니다. 마커에서 Marker.setAnimation 메서드를 사용하거나 MarkerOptions.animation 옵션을 사용하여 애니메이션을 재생합니다.

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

BOUNCE nullMarker.setAnimation를 호출하여 애니메이션이 중지될 때까지 마커가 반사됩니다.
DROP 마커가 지도 상단에서 최종 위치로 떨어집니다. 마커가 멈추면 애니메이션이 중지되고 Marker.getAnimationnull를 반환합니다. 이 유형의 애니메이션은 보통 마커를 만들 때 지정됩니다.