새로운 지도 스타일이 곧 Google Maps Platform에 제공될 예정입니다. 이 지도 스타일 지정 업데이트에는 새로운 기본 색상 팔레트와 지도 환경 및 사용성 개선사항이 포함됩니다. 모든 지도 스타일이 2025년 3월에 자동으로 업데이트됩니다. 사용 가능 여부 및 더 일찍 선택하는 방법에 대한 자세한 내용은 Google Maps Platform용 새로운 지도 스타일을 참고하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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를 생성한 후 지도에 표시하려면 open을 호출해야 합니다. 사용자가 InfoWindow에서 닫기 버튼을 클릭하여 지도에서 제거하거나 개발자가 close()를 호출하여 동일한 효과를 얻을 수 있습니다.

생성자

InfoWindow

InfoWindow([opts])

매개변수:

opts: InfoWindowOptions optional

지정한 옵션을 사용하여 정보창을 만듭니다. 옵션에 지정된 내용에 따라 지도의 특정 위치 또는 마커 위에 InfoWindow를 배치할 수 있습니다. 자동 화면 이동을 사용 중지하지 않는 한, InfoWindow는 열릴 때 지도가 표시되도록 화면을 이동합니다. InfoWindow를 생성한 후 지도에 표시하려면 open을 호출해야 합니다. 사용자가 InfoWindow에서 닫기 버튼을 클릭하여 지도에서 제거하거나 개발자가 close()를 호출하여 동일한 효과를 얻을 수 있습니다.

속성
`isOpen`	유형: `boolean` 정보창이 열려 있는지 확인합니다.

방법
`close`	`close()` 매개변수: 없음 반환 값: 없음 DOM 구조에서 제거하여 이 InfoWindow를 닫습니다.
`focus`	`focus()` 매개변수: 없음 반환 값: 없음 이 `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는 앵커와 동일한 지도 또는 파노라마에 렌더링됩니다(사용 가능한 경우). 반환 값: 없음 지정한 지도에서 이 InfoWindow를 엽니다. 원하는 경우 InfoWindow를 앵커와 연결할 수 있습니다. 핵심 API에서 유일한 앵커는 Marker 클래스입니다. 하지만 앵커는 LatLng `position` 속성을 노출하는 모든 MVCObject일 수 있으며 `pixelOffset`를 계산하기 위한 Point `anchorPoint` 속성도 선택적으로 사용할 수 있습니다 (InfoWindowOptions 참조). `anchorPoint`는 앵커 위치에서 InfoWindow 끝까지의 오프셋입니다. `InfoWindowOpenOptions` 인터페이스를 이 메서드의 단일 인수로 사용하는 것이 좋습니다. 열 때 브라우저 포커스가 변경되지 않도록 하려면 `InfoWindowOpenOptions.shouldFocus`를 `false`로 설정합니다.
`setContent`	`setContent([content])` 매개변수: `content`: `string\|Element\|Text optional` 이 InfoWindow에서 표시할 콘텐츠입니다. 반환 값: 없음
`setHeaderContent`	`setHeaderContent([headerContent])` 매개변수: `headerContent`: `string\|Element\|Text optional` 이 InfoWindow에서 표시할 헤더 콘텐츠입니다. `InfoWindowOptions.headerContent`를 참고하세요. 반환 값: 없음
`setHeaderDisabled`	`setHeaderDisabled([headerDisabled])` 매개변수: `headerDisabled`: `boolean optional` 전체 헤더 행을 사용 중지할지 여부를 지정합니다. `InfoWindowOptions.headerDisabled`를 참고하세요. 반환 값: 없음
`setOptions`	`setOptions([options])` 매개변수: `options`: `InfoWindowOptions optional` 반환 값: 없음
`setPosition`	`setPosition([position])` 매개변수: `position`: `LatLng\|LatLngLiteral optional` 이 InfoWindow를 표시할 LatLng 위치입니다. 반환 값: 없음
`setZIndex`	`setZIndex(zIndex)` 매개변수: `zIndex`: `number` 이 InfoWindow의 Z-색인입니다. Z-색인이 큰 InfoWindow는 Z-색인이 낮은 다른 모든 InfoWindow 앞에 표시됩니다. 반환 값: 없음
상속됨: `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()` 인수: 없음 이 이벤트는 위치 속성이 변경되면 시작됩니다.
`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에 표시할 콘텐츠입니다. 이 URL은 HTML 요소, 일반 텍스트 문자열, HTML을 포함하는 문자열일 수 있습니다. 정보창의 크기는 콘텐츠에 따라 조정됩니다. 콘텐츠의 크기를 명시적으로 설정하려면 콘텐츠를 해당 크기의 HTML 요소가 되도록 설정합니다.
`disableAutoPan optional`	유형: `boolean optional` 기본값: `false` 정보 창이 열릴 때 완전히 표시되도록 하려면 지도 화면 이동을 사용 중지하세요.
`headerContent optional`	유형: `string\|Element\|Text optional` InfoWindow 헤더 행에 표시할 콘텐츠입니다. 이 요소는 HTML 요소 또는 일반 텍스트 문자열일 수 있습니다. 정보창의 크기는 콘텐츠에 따라 조정됩니다. 헤더 콘텐츠의 크기를 명시적으로 설정하려면 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를 앵커로 열면 앵커의 `anchorPoint` 속성에서 `pixelOffset`가 계산됩니다.
`position optional`	유형: `LatLng\|LatLngLiteral optional` 이 InfoWindow를 표시할 LatLng입니다. InfoWindow를 앵커와 함께 열면 앵커의 위치가 대신 사용됩니다.
`zIndex optional`	유형: `number optional` 모든 InfoWindow가 zIndex 순으로 지도에 표시되며 값이 높은 InfoWindow가 값이 낮은 InfoWindow 앞에 표시됩니다. 기본적으로 InfoWindow는 위도에 따라 표시되며, 위도가 낮은 InfoWindow가 위도가 높은 InfoWindow 앞에 표시됩니다. InfoWindow는 항상 마커 앞에 표시됩니다.

InfoWindowOpenOptions 인터페이스

google.maps.InfoWindowOpenOptions 인터페이스

정보 창을 열기 위한 옵션

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

Info Window

InfoWindow 클래스

생성자

속성

방법

이벤트

InfoWindowOptions 인터페이스

속성

InfoWindowOpenOptions 인터페이스

속성