Info Window

InfoWindow 클래스

google.maps.InfoWindow 클래스

풍선처럼 보이며 마커에 연결되는 경우가 많은 오버레이입니다.

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

const {InfoWindow} = await google.maps.importLibrary("maps") 또는 const {InfoWindow} = await google.maps.importLibrary("streetView")를 호출하여 액세스합니다.
Maps JavaScript API의 라이브러리를 참고하세요.
InfoWindow
InfoWindow([opts])
매개변수: 
지정된 옵션으로 정보 창을 만듭니다. InfoWindow는 옵션에 지정된 내용에 따라 특정 위치의 지도에 배치하거나 마커 위에 배치할 수 있습니다. 자동 이동이 사용 중지되지 않는 한 InfoWindow가 열리면 지도가 이동하여 InfoWindow가 표시됩니다. InfoWindow를 구성한 후 open을 호출하여 지도에 표시해야 합니다. 사용자는 정보 창의 닫기 버튼을 클릭하여 지도에서 정보 창을 삭제할 수 있으며, 개발자는 동일한 효과를 위해 close()를 호출할 수 있습니다.
isOpen
유형:  boolean
InfoWindow가 열려 있는지 확인합니다.
close
close()
매개변수:  없음
반환 값:  None
DOM 구조에서 제거하여 이 InfoWindow를 닫습니다.
focus
focus()
매개변수:  없음
반환 값:  None
이 InfoWindow에 포커스를 설정합니다. InfoWindow에 포커스를 설정하기 전에 visible 이벤트와 함께 이 메서드를 사용하여 InfoWindow가 표시되는지 확인하는 것이 좋습니다. 보이지 않는 InfoWindow에는 포커스를 둘 수 없습니다.
getContent
getContent()
매개변수:  없음
반환 값:  string|Element|Text|null|undefined 이 InfoWindow의 콘텐츠입니다. 이전에 콘텐츠로 설정된 것과 동일합니다.
getHeaderContent
getHeaderContent()
매개변수:  없음
반환 값:  string|Element|Text|null|undefined 이 InfoWindow의 헤더 콘텐츠입니다. InfoWindowOptions.headerContent를 참고하세요.
getHeaderDisabled
getHeaderDisabled()
매개변수:  없음
반환 값:  boolean|undefined 전체 헤더 행이 사용 중지되었는지 여부입니다. InfoWindowOptions.headerDisabled를 참고하세요.
getPosition
getPosition()
매개변수:  없음
반환 값:  LatLng|null|undefined 이 InfoWindow의 LatLng 위치입니다.
getZIndex
getZIndex()
매개변수:  없음
반환 값:  number 이 InfoWindow의 zIndex입니다.
open
open([options, anchor])
매개변수: 
  • options:  InfoWindowOpenOptions|Map|StreetViewPanorama optional InfoWindowOpenOptions 객체 (권장) 또는 이 InfoWindow를 렌더링할 지도|파노라마입니다.
  • anchor:  MVCObject|AdvancedMarkerElement optional 이 InfoWindow가 배치될 앵커입니다. 앵커가 null이 아닌 경우 InfoWindow는 앵커의 상단 중앙에 배치됩니다. InfoWindow는 앵커와 동일한 지도 또는 파노라마에 렌더링됩니다(사용 가능한 경우).
반환 값:  None
지정된 지도에서 이 InfoWindow를 엽니다. 선택적으로 InfoWindow를 앵커와 연결할 수 있습니다. 핵심 API에서 유일한 앵커는 마커 클래스입니다. 하지만 앵커는 LatLng position 속성을 노출하고 선택적으로 pixelOffset를 계산하기 위한 Point anchorPoint 속성을 노출하는 MVCObject일 수 있습니다 (InfoWindowOptions 참고). anchorPoint는 앵커의 위치에서 InfoWindow의 끝까지의 오프셋입니다. 이 메서드의 단일 인수로 InfoWindowOpenOptions 인터페이스를 사용하는 것이 좋습니다. 열 때 브라우저 포커스가 변경되지 않도록 하려면 InfoWindowOpenOptions.shouldFocus을 false로 설정하세요.
setContent
setContent([content])
매개변수: 
  • content:  string|Element|Text optional 이 InfoWindow에 표시할 콘텐츠입니다.
반환 값:  None
setHeaderContent
setHeaderContent([headerContent])
매개변수: 
반환 값:  None
setHeaderDisabled
setHeaderDisabled([headerDisabled])
매개변수: 
반환 값:  None
setOptions
setOptions([options])
매개변수: 
반환 값:  None
setPosition
setPosition([position])
매개변수: 
  • position:  LatLng|LatLngLiteral optional 이 InfoWindow를 표시할 LatLng 위치입니다.
반환 값:  None
setZIndex
setZIndex(zIndex)
매개변수: 
  • zIndex:  number 이 InfoWindow의 z-index입니다. z-색인이 더 큰 InfoWindow는 z-색인이 더 낮은 다른 모든 InfoWindow 앞에 표시됩니다.
반환 값:  None
상속: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
close
function()
인수:  없음
이 이벤트는 InfoWindow가 닫힐 때마다 발생합니다. 예를 들어 InfoWindow.close 메서드를 호출하거나, Esc 키를 눌러 InfoWindow를 닫거나, 닫기 버튼을 클릭하거나, InfoWindow를 다른 지도로 이동하는 경우입니다.
closeclick
function()
인수:  없음
이 이벤트는 닫기 버튼을 클릭할 때 발생합니다.
content_changed
function()
인수:  없음
이 이벤트는 콘텐츠 속성이 변경될 때 발생합니다.
domready
function()
인수:  없음
이 이벤트는 InfoWindow의 콘텐츠가 포함된 <div>이 DOM에 연결될 때 발생합니다. 정보창 콘텐츠를 동적으로 작성하는 경우 이 이벤트를 모니터링하는 것이 좋습니다.
headercontent_changed
function()
인수:  없음
이 이벤트는 headerContent 속성이 변경될 때 발생합니다.
headerdisabled_changed
function()
인수:  없음
이 이벤트는 headerDisabled 속성이 변경될 때 발생합니다.
position_changed
function()
인수:  없음
이 이벤트는 position 속성이 변경될 때 발생합니다.
visible
function()
인수:  없음
이 이벤트는 InfoWindow가 완전히 표시될 때 발생합니다. InfoWindow가 화면에서 벗어났다가 다시 화면으로 돌아오면 이 이벤트가 발생하지 않습니다.
zindex_changed
function()
인수:  없음
이 이벤트는 InfoWindow의 zIndex가 변경될 때 발생합니다.

InfoWindowOptions 인터페이스

google.maps.InfoWindowOptions 인터페이스

InfoWindow에 설정할 수 있는 속성을 정의하는 데 사용되는 InfoWindowOptions 객체입니다.
ariaLabel optional
유형:  string optional
InfoWindow에 할당할 AriaLabel입니다.
content optional
유형:  string|Element|Text optional
InfoWindow에 표시할 콘텐츠입니다. HTML 요소, 일반 텍스트 문자열 또는 HTML이 포함된 문자열일 수 있습니다. InfoWindow의 크기는 콘텐츠에 따라 조정됩니다. 콘텐츠의 명시적 크기를 설정하려면 해당 크기의 HTML 요소가 되도록 콘텐츠를 설정하세요.
disableAutoPan optional
유형:  boolean optional
기본값: false
InfoWindow가 열릴 때 완전히 표시되도록 지도를 패닝하는 기능을 사용 중지합니다.
headerContent optional
유형:  string|Element|Text optional
InfoWindow 헤더 행에 표시할 콘텐츠입니다. HTML 요소 또는 일반 텍스트 문자열일 수 있습니다. InfoWindow의 크기는 콘텐츠에 따라 조정됩니다. 헤더 콘텐츠의 명시적 크기를 설정하려면 headerContent를 해당 크기의 HTML 요소로 설정하세요.
headerDisabled optional
유형:  boolean optional
정보 창에서 전체 헤더 행을 사용 중지합니다. true로 설정하면 헤더가 삭제되어 헤더 콘텐츠와 닫기 버튼이 숨겨집니다.
maxWidth optional
유형:  number optional
콘텐츠의 너비와 관계없이 InfoWindow의 최대 너비입니다. 이 값은 open() 호출 전에 설정된 경우에만 고려됩니다. 콘텐츠를 변경할 때 최대 너비를 변경하려면 close(), setOptions(), open()를 차례로 호출하세요.
minWidth optional
유형:  number optional
콘텐츠의 너비와 관계없이 InfoWindow의 최소 너비입니다. 이 속성을 사용할 때는 minWidth을 지도의 너비 (픽셀)보다 작은 값으로 설정하는 것이 좋습니다. 이 값은 open() 호출 전에 설정된 경우에만 고려됩니다. 콘텐츠를 변경할 때 최소 너비를 변경하려면 close(), setOptions(), open()를 차례로 호출합니다.
pixelOffset optional
유형:  Size optional
정보 창이 고정된 지도의 지리적 좌표에서 정보 창의 끝까지의 오프셋(픽셀)입니다. InfoWindow가 앵커와 함께 열리면 pixelOffset이 앵커의 anchorPoint 속성에서 계산됩니다.
position optional
유형:  LatLng|LatLngLiteral optional
이 정보 창을 표시할 LatLng입니다. InfoWindow가 앵커와 함께 열리면 앵커의 위치가 대신 사용됩니다.
zIndex optional
유형:  number optional
모든 정보 창은 zIndex 순으로 지도에 표시되며 값이 더 큰 정보 창이 값이 더 작은 정보 창 앞에 표시됩니다. 기본적으로 정보 창은 위도에 따라 표시되며, 위도가 낮은 정보 창이 위도가 높은 정보 창 앞에 표시됩니다. 정보 창은 항상 마커 앞에 표시됩니다.

InfoWindowOpenOptions 인터페이스

google.maps.InfoWindowOpenOptions 인터페이스

InfoWindow를 여는 옵션
anchor optional
유형:  MVCObject|AdvancedMarkerElement optional
이 InfoWindow가 배치될 앵커입니다. 앵커가 null이 아닌 경우 InfoWindow는 앵커의 상단 중앙에 배치됩니다. InfoWindow는 앵커와 동일한 지도 또는 파노라마에 렌더링됩니다(사용 가능한 경우).
map optional
유형:  Map|StreetViewPanorama optional
이 InfoWindow를 렌더링할 지도 또는 파노라마입니다.
shouldFocus optional
유형:  boolean optional
정보 창이 열릴 때 정보 창 내부로 포커스를 이동해야 하는지 여부입니다. 이 속성이 설정되지 않았거나 null 또는 undefined로 설정된 경우 휴리스틱을 사용하여 포커스를 이동해야 하는지 여부를 결정합니다. 휴리스틱은 변경될 수 있으며 모든 사용 사례에 적합하지 않을 수 있으므로 필요에 맞게 이 속성을 명시적으로 설정하는 것이 좋습니다.