InfoWindow 클래스
class
google.maps.InfoWindow
extends MVCObject
library "maps", "streetView"
말풍선처럼 보이고 마커에 연결되는 경우가 많은 오버레이입니다.
const {InfoWindow} = await google.maps.importLibrary("maps");
const {InfoWindow} = await google.maps.importLibrary("streetView");
생성자 | |
|---|---|
InfoWindow |
InfoWindow([opts])매개변수:
지정된 옵션으로 정보 창을 만듭니다. InfoWindow는 옵션에 지정된 내용에 따라 지도의 특정 위치 또는 마커 위에 배치할 수 있습니다. 자동 화면 이동이 사용 중지되지 않는 한 InfoWindow는 열릴 때 지도를 화면 이동하여 표시합니다. InfoWindow를 구성한 후 open을 호출하여 지도에 표시해야 합니다. 사용자가 InfoWindow의 닫기 버튼을 클릭하여 지도에서 삭제할 수 있으며, 개발자가 close()를 호출하여 동일한 효과를 얻을 수도 있습니다. |
속성 | |
|---|---|
isOpen
readonly |
유형:
booleanInfoWindow가 열려 있는지 확인합니다. |
메서드 | |
|---|---|
close |
close()매개변수: 없음
반환 값: 없음
DOM 구조에서 제거하여 이 InfoWindow를 닫습니다. |
focus |
focus()매개변수: 없음
반환 값: 없음
이 InfoWindow에 포커스를 설정합니다. 이 메서드를 visible 이벤트와 함께 사용하여 InfoWindow에 포커스를 설정하기 전에 표시되는지 확인하는 것이 좋습니다. 표시되지 않는 InfoWindow에는 포커스를 맞출 수 없습니다. |
getContent |
getContent()매개변수: 없음
|
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])매개변수:
반환 값: 없음
지정된 지도에서 이 InfoWindow를 엽니다. 원하는 경우 InfoWindow를 앵커와 연결할 수 있습니다. 핵심 API에서 유일한 앵커는 Marker 클래스입니다. 하지만 앵커는 LatLng position 속성을 노출하는 모든 MVCObject일 수 있으며, pixelOffset를 계산하기 위해 Point anchorPoint 속성을 노출할 수도 있습니다(InfoWindowOptions 참고). anchorPoint는 앵커 위치에서 InfoWindow 끝까지의 오프셋입니다. 이 메서드의 단일 인수로 InfoWindowOpenOptions 인터페이스를 사용하는 것이 좋습니다. 열 때 브라우저 포커스가 변경되지 않도록 하려면 InfoWindowOpenOptions.shouldFocus을 false로 설정합니다. |
setContent |
setContent([content])반환 값: 없음
|
setHeaderContent |
setHeaderContent([headerContent])매개변수:
반환 값: 없음
|
setHeaderDisabled |
setHeaderDisabled([headerDisabled])매개변수:
반환 값: 없음
|
setOptions |
setOptions([options])매개변수:
반환 값: 없음
|
setPosition |
setPosition([position])매개변수:
반환 값: 없음
|
setZIndex |
setZIndex(zIndex)매개변수:
반환 값: 없음
|
상속됨:
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
선택사항 |
유형:
string optionalInfoWindow에 할당할 AriaLabel입니다. |
content
선택사항 |
InfoWindow에 표시할 콘텐츠입니다. HTML 요소, 일반 텍스트 문자열 또는 HTML이 포함된 문자열일 수 있습니다. InfoWindow의 크기는 콘텐츠에 따라 조정됩니다. 콘텐츠의 명시적 크기를 설정하려면 콘텐츠를 해당 크기의 HTML 요소로 설정합니다. |
disableAutoPan
선택사항 |
유형:
boolean optional기본값:
falseInfoWindow가 열릴 때 완전히 표시되도록 지도 화면 이동을 사용 중지합니다. |
headerContent
선택사항 |
InfoWindow 헤더 행에 표시할 콘텐츠입니다. HTML 요소 또는 일반 텍스트 문자열일 수 있습니다. InfoWindow의 크기는 콘텐츠에 따라 조정됩니다. 헤더 콘텐츠의 명시적 크기를 설정하려면 headerContent를 해당 크기의 HTML 요소로 설정합니다. |
headerDisabled
선택사항 |
유형:
boolean optionalInfoWindow에서 전체 헤더 행을 사용 중지합니다. true로 설정하면 헤더가 삭제되어 헤더 콘텐츠와 닫기 버튼이 숨겨집니다. |
maxWidth
선택사항 |
유형:
number optional콘텐츠의 너비와 관계없이 InfoWindow의 최대 너비입니다. 이 값은 open() 호출 전에 설정된 경우에만 고려됩니다. 콘텐츠를 변경할 때 최대 너비를 변경하려면 close(), setOptions(), open()를 차례로 호출합니다. |
minWidth
선택사항 |
유형:
number optional콘텐츠 너비와 관계없는 InfoWindow의 최소 너비입니다. 이 속성을 사용할 때는 minWidth를 지도의 너비 (픽셀 단위)보다 작은 값으로 설정하는 것이 좋습니다. 이 값은 open() 호출 전에 설정된 경우에만 고려됩니다. 콘텐츠를 변경할 때 최소 너비를 변경하려면 close(), setOptions(), open()를 호출합니다. |
pixelOffset
선택사항 |
유형:
Size optional정보 창이 고정된 지리적 좌표의 지도 지점에서 정보 창 끝의 오프셋(픽셀)입니다. 앵커를 사용하여 InfoWindow를 열면 앵커의 anchorPoint 속성에서 pixelOffset가 계산됩니다. |
position
선택사항 |
유형:
LatLng|LatLngLiteral optional이 InfoWindow를 표시할 LatLng입니다. InfoWindow가 앵커와 함께 열리면 앵커의 위치가 대신 사용됩니다. |
zIndex
선택사항 |
유형:
number optional모든 InfoWindow는 zIndex 순서대로 지도에 표시되며, 값이 클수록 값이 작은 InfoWindow 앞에 표시됩니다. 기본적으로 InfoWindow는 위도에 따라 표시되며, 위도가 낮은 InfoWindow가 위도가 높은 InfoWindow 앞에 표시됩니다. InfoWindow는 항상 마커 앞에 표시됩니다. |
InfoWindowOpenOptions 인터페이스
인터페이스
google.maps.InfoWindowOpenOptions
InfoWindow를 열기 위한 옵션
속성 | |
|---|---|
anchor
선택사항 |
유형:
MVCObject|AdvancedMarkerElement optional이 InfoWindow가 배치될 앵커입니다. 앵커가 null이 아닌 경우 InfoWindow는 앵커의 상단 중앙에 배치됩니다. InfoWindow는 앵커와 동일한 지도 또는 파노라마에 렌더링됩니다(사용 가능한 경우). |
map
선택사항 |
유형:
Map|StreetViewPanorama optional이 InfoWindow를 렌더링할 지도 또는 파노라마입니다. |
shouldFocus
선택사항 |
유형:
boolean optionalInfoWindow가 열릴 때 InfoWindow 내부로 포커스를 이동해야 하는지 여부입니다. 이 속성이 설정되지 않거나 null 또는 undefined로 설정되면 휴리스틱을 사용하여 포커스를 이동할지 여부를 결정합니다. 휴리스틱은 변경될 수 있으며 모든 사용 사례에 적합하지 않을 수 있으므로 필요에 맞게 이 속성을 명시적으로 설정하는 것이 좋습니다. |