---
description: >-
  지도 또는 마커 위에 상세 정보를 표출하는 기능입니다. 주로 팝업 말풍선 모양으로 많이 표현되며, 뷰 형태로 커스터마이징 할 수도 있습니다.
  정보 창을 지도 위에 그리는 방법을 설명합니다.
---

# 정보 창

## 추가 및 삭제 <a href="#add-and-remove" id="add-and-remove"></a>

지도 위에 정보 창을 추가하려면 [`InvInfoWindow`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html) 객체를 생성한 다음 반드시 [`position`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setPosition-com.inavi.mapsdk.geometry.LatLng-) 속성과 [`adapter`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setAdapter-com.inavi.mapsdk.style.shapes.InvInfoWindowAdapter-) 속성을 설정해주어야 합니다. [`position`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setPosition-com.inavi.mapsdk.geometry.LatLng-) 속성은 [`setPosition()`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setPosition-com.inavi.mapsdk.geometry.LatLng-) 함수를 통해 설정할 수 있으며, [`adapter`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setAdapter-com.inavi.mapsdk.style.shapes.InvInfoWindowAdapter-) 속성은 [`setAdapter()`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setAdapter-com.inavi.mapsdk.style.shapes.InvInfoWindowAdapter-) 함수 또는 [정보 창 객체 생성자](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#InvInfoWindow-com.inavi.mapsdk.style.shapes.InvInfoWindowAdapter-)를 통해 설정할 수 있습니다.&#x20;

생성된 정보 창 객체의 [`map`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvShape.html#setMap-com.inavi.mapsdk.maps.InaviMap-) 속성을 표출하고자 하는 지도 객체로 설정하면 정보 창이 지도 위에 표출됩니다.

{% tabs %}
{% tab title="Kotlin" %}
```kotlin
// 지도 위에 정보 창 추가
val infoWindow = InvInfoWindow().apply {
    position = LatLng(37.40219, 127.11047)
    adapter = object : InvInfoWindowTextAdapter(context) {
        override fun getText(infoWindow: InvInfoWindow): CharSequence {
            return "정보 창 내용"
        }
    }
    map = inaviMap
}
```
{% endtab %}
{% endtabs %}

<div align="left"><img src="https://2296596695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LjEmbGuGnOchPVUb5Zs%2F-LrKQq3x1svbm3UCCv-l%2F-LrKQtXeYojo6AKZx2je%2Fshapes-info-window-1.png?alt=media&#x26;token=23c51018-be26-4726-97c2-465812a76048" alt="지도 위에 정보 창을 추가한 모습"></div>

반대로 지도에서 정보 창을를 제거하려면 [`map`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvShape.html#setMap-com.inavi.mapsdk.maps.InaviMap-) 속성을 `null`로 설정하면 됩니다.

{% tabs %}
{% tab title="Kotlin" %}
```kotlin
// 지도에서 정보 창 제거
infoWindow.map = null
```
{% endtab %}
{% endtabs %}

### 마커 위에 그리기 <a href="#set-marker" id="set-marker"></a>

정보 창은 지도 위 뿐만 아니라 마커 위에도 그릴 수 있습니다. [`marker`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setMarker-com.inavi.mapsdk.style.shapes.InvMarker-) 속성으로 정보 창이 그려질 마커를 설정하거나 위에 그려진 마커의 인스턴스를 가져올 수 있습니다.

{% tabs %}
{% tab title="Kotlin" %}
```kotlin
// 지도 위에 마커 추가
val marker = InvMarker().apply {
    position = LatLng(37.40219, 127.11047)
    map = inaviMap
}

// 마커에 정보 창 표출
infoWindow.setMarker(marker)
```
{% endtab %}
{% endtabs %}

<div align="left"><img src="https://2296596695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LjEmbGuGnOchPVUb5Zs%2F-LrKQq3x1svbm3UCCv-l%2F-LrKQxJT0LoPPFm6RVOL%2Fshapes-info-window-2.png?alt=media&#x26;token=cd0928f3-cfe8-4d0e-b854-b36274f7bfcf" alt="마커 위에 정보 창을 추가한 모습"></div>

### 마커 위에 그려지고 있는지 확인 <a href="#get-marker" id="get-marker"></a>

정보 창이 마커 위에 그려지게 되면 [`getMarker()`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#getMarker--) 함수로 현재 그려지고 있는 마커의 인스턴스를 가져올 수 있으며, [`InvMarker#getInfoWindow()`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvMarker.html#getInfoWindow--) 함수로 마커 위에 그려지고 있는 정보 창의 인스턴스를 가져올 수 있습니다.

{% tabs %}
{% tab title="Kotlin" %}
```kotlin
if (marker.infoWindow != null) {
    // 정보 창이 마커 위에 표출되고 있는 경우
} else {
    // 정보 창이 마커 위에 표출되고 있지 않는 경우
}
```
{% endtab %}
{% endtabs %}

## 위치 <a href="#position" id="position"></a>

[`position`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#getPosition--) 속성으로 정보 창이 표출될 위치를 가져오거나 새로 설정할 수 있습니다. 이미 정보 창이 지도에 표출 중이라면, 이 속성을 변경할 경우 정보 창이 새로운 위치로 이동합니다. [`position`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setPosition-com.inavi.mapsdk.geometry.LatLng-) 속성을 설정하지 않았거나, 좌표가 유효하지 않으면 [`InvalidLatLngException`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/exceptions/InvalidLatLngException.html)이 발생합니다.

{% hint style="info" %}
[`position`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#getPosition--) 속성과 [`marker`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#getMarker--) 속성은 배타적인 관계입니다. [`marker`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setMarker-com.inavi.mapsdk.style.shapes.InvMarker-) 속성이 설정되어 마커 위에 정보 창이 그려지고 있는 상태에서 [`position`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setPosition-com.inavi.mapsdk.geometry.LatLng-) 속성을 설정하면 [`marker`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#getMarker--) 속성은 무시됩니다. 반대로 [`position`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#getPosition--) 속성이 설정되어 있는 상태에서 [`marker`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setMarker-com.inavi.mapsdk.style.shapes.InvMarker-) 속성을 설정하면 [`position`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#getPosition--) 속성은 무시됩니다.
{% endhint %}

## 어댑터 <a href="#adapter" id="adapter"></a>

[`adapter`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#getAdapter--) 속성으로 정보 창에 대한 어댑터를 가져오거나 새로 설정할 수 있습니다. 어댑터는 지도에 표출할 정보 창의 형태를 정의한 것을 의미합니다.&#x20;

아이나비 지도 SDK는 기본적으로 두 가지 기본 어댑터를 제공합니다.

| 종류                                                                                                                                                         | 설명                                 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| [`InvInfoWindowTextAdapter`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindowTextAdapter.html) | 기본 말풍선 배경에 텍스트가 포함된 정보 창을 표출할 때 사용 |
| [`InvInfoWindowViewAdapter`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindowViewAdapter.html) | 커스텀 뷰로 구성된 정보 창을 표출할 때 사용          |

가장 간단하게 [`adapter`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#setAdapter-com.inavi.mapsdk.style.shapes.InvInfoWindowAdapter-) 속성을 설정하는 방법은 [`InvInfoWindowTextAdapter`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindowTextAdapter.html)를 사용하는 것입니다. 이 클래스에는 기본 말풍선 배경이 들어가 있으며, 개발자는 [`getText()`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindowTextAdapter.html#getText-com.inavi.mapsdk.style.shapes.InvInfoWindow-) 함수만을 오버라이딩하여 표출할 문구를 반환시켜주면 됩니다.

{% tabs %}
{% tab title="Kotlin" %}
```kotlin
// 정보 창에 설정된 position 속성을 텍스트로 표출
infoWindow.position = LatLng(37.40219, 127.11047)
infoWindow.adapter = object : InvInfoWindowTextAdapter(context) {
    override fun getText(infoWindow: InvInfoWindow): CharSequence {
        return if (infoWindow.marker == null){
            "좌표 : (${infoWindow.position.latitude}, " +
                    "${infoWindow.position.longitude})"
        } else {
           "마커 InfoWindow"
        }
    }
}
```
{% endtab %}
{% endtabs %}

<div align="left"><img src="https://2296596695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LjEmbGuGnOchPVUb5Zs%2F-LrKQq3x1svbm3UCCv-l%2F-LrKR17uXh5RF3dIrleB%2Fshapes-info-window-3.png?alt=media&#x26;token=88d6d9da-db59-42f2-9053-271c6cc4ebc1" alt="정보 창에 어댑터를 설정한 모습"></div>

## 불투명도 <a href="#alpha" id="alpha"></a>

[`alpha`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#getAlpha--) 속성으로 정보 창의 불투명도를 가져오거나 새로 설정할 수 있습니다. `0.0`\~`1.0` 사이의 값을 입력할 수 있으며 `0.0`은 완전한 투명, `1.0`은 완전한 불투명을 의미합니다.

[`alpha`](https://inavi-systems.github.io/inavi-maps-sdk-reference/android/com/inavi/mapsdk/style/shapes/InvInfoWindow.html#getAlpha--) 속성 값이 `0.0`이면 시각적으로는 정보 창이 표출되지 않지만 실제로 정보 창은 지도 위에 그려지고 있습니다. 따라서, 클릭 리스너를 설정했을 경우 이벤트를 받게 됩니다.

{% tabs %}
{% tab title="Kotlin" %}
```kotlin
// 정보 창의 불투명도를 0.5로 설정
infoWindow.alpha = 0.5f
```
{% endtab %}
{% endtabs %}

<div align="left"><img src="https://2296596695-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LjEmbGuGnOchPVUb5Zs%2F-LrKQq3x1svbm3UCCv-l%2F-LrKR50NEZTgISaijtbW%2Fshapes-info-window-4.png?alt=media&#x26;token=88def628-99f1-454b-aa91-b6cddbe374be" alt="정보 창에 불투명도를 설정한 모습"></div>
