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]) 매개변수:  opts:  InfoWindowOptions optional 지정된 옵션으로 정보 창을 만듭니다. 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]) 매개변수:  headerContent:  string|Element|Text optional 이 InfoWindow에 표시할 헤더 콘텐츠입니다. InfoWindowOptions.headerContent를 참고하세요. 반환 값:  None
setHeaderDisabled	setHeaderDisabled([headerDisabled]) 매개변수:  headerDisabled:  boolean optional 전체 헤더 행을 사용 중지할지 여부를 지정합니다. InfoWindowOptions.headerDisabled를 참고하세요. 반환 값:  None
setOptions	setOptions([options]) 매개변수:  options:  InfoWindowOptions optional 반환 값:  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로 설정된 경우 휴리스틱을 사용하여 포커스를 이동해야 하는지 여부를 결정합니다. 휴리스틱은 변경될 수 있으며 모든 사용 사례에 적합하지 않을 수 있으므로 필요에 맞게 이 속성을 명시적으로 설정하는 것이 좋습니다.