정보 창

InfoWindow는 지도 위에 말풍선 모양의 콘텐츠를 표시할 수 있는 정보 창을 정의하는 객체입니다.

정보 창의 디자인은 NAVER 지도 API v3에서 제공하는 스타일을 사용할 수 있고, 스타일 관련 옵션으로 정보 창 테두리, 배경색, 말풍선 꼬리의 스타일을 설정할 수 있습니다.

정보 창 내부의 콘텐츠는 DOM 요소로 구성되므로 NAVER 지도 API v3에서 제공하는 스타일을 무시하고 사용자가 원하는 디자인으로 정보 창을 꾸밀 수도 있습니다.

마커 위에 정보 창 올리기

정보 창을 지도 위에 노출하려면 open(map, anchor) 메서드를 호출합니다. 첫 번째 파라미터인 map은 정보 창을 올릴 Map 객체를 설정합니다. 두 번째 파라미터인 anchor는 지도 위에서 정보 창의 위치를 결정하는 인자입니다.

anchor에 LatLng 또는 Point 객체로 지도 좌표를 설정하면 해당 좌표를 가리키도록 정보 창을 위치시킵니다. anchor는 지도 좌표뿐만 아니라 Marker 객체와 같이 객체 내부에 지도 좌표 속성과 해당 지도 좌표 위치에서의 오프셋값인 anchor 속성을 포함하는 KVO 객체로도 설정할 수 있습니다.

해당 객체는 getPosition과 getAnchor 메서드가 구현되어 있어야 하고, InfoWindow 객체는 이를 이용해 position과 anchor값을 계산하여 적절한 위치에 정보 창을 노출합니다.

다음은 마커 위에 정보 창을 노출하는 예제입니다.

var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147);

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.5698411, 126.9783927),
    zoom: 10
});

var contentString = [
    '<div class="iw_inner">',
    '   <h3>서울특별시청</h3>',
    '   <p>서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청<br>',
    '       <img src="./img/hi-seoul.jpg" width="55" height="55" alt="서울시청" class="thumb" /><br>',
    '       02-120 | 공공,사회기관 > 특별,광역시청<br>',
    '       <a href="http://www.seoul.go.kr" target="_blank">www.seoul.go.kr/</a>',
    '   </p>',
    '</div>'
].join('');

var marker = new naver.maps.Marker({
    map: map,
    position: cityhall
});

var infowindow = new naver.maps.InfoWindow({
    content: contentString
});

naver.maps.Event.addListener(marker, "click", function(e) {
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});

위 예제는 jQuery 구문을 포함하고 있습니다.

Examples: 정보 창 표시하기

정보 창 디자인 스타일 옵션 조정하기

InfoWindow를 생성할 때 생성자에 InfoWindowOptions를 설정해야 합니다. InfoWindowOptions에는 정보 창의 테두리, 배경색, 말꼬리 등의 모양을 결정하는 스타일 옵션이 포함되어 있습니다. 이를 조정하여 사용자는 원하는 모양대로 정보 창을 노출할 수 있습니다.

다음은 스타일 옵션값을 조절하여 정보 창 모양을 설정하는 예제입니다.

var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147);

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.5698411, 126.9783927),
    zoom: 10
});

var contentString = [
    '<div class="iw_inner">',
    '   <h3>서울특별시청</h3>',
    '   <p>서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청<br>',
    '       <img src="./img/hi-seoul.jpg" width="55" height="55" alt="서울시청" class="thumb" /><br>',
    '       02-120 | 공공,사회기관 > 특별,광역시청<br>',
    '       <a href="http://www.seoul.go.kr" target="_blank">www.seoul.go.kr/</a>',
    '   </p>',
    '</div>'
].join('');

var marker = new naver.maps.Marker({
    map: map,
    position: cityhall
});

var infowindow = new naver.maps.InfoWindow({

    content: contentString,

    maxWidth: 140,
    backgroundColor: "#eee",
    borderColor: "#2db400",
    borderWidth: 5,
    anchorSize: new naver.maps.Size(30, 30),
    anchorSkew: true,
    anchorColor: "#eee",

    pixelOffset: new naver.maps.Point(20, -20)
});

naver.maps.Event.addListener(marker, "click", function(e) {
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});

위 예제는 jQuery 구문을 포함하고 있습니다.

Examples: 정보 창 옵션 사용하기

사용자 정의 정보 창

InfoWindow 객체에서 제공하는 정보 창 모양을 무시하고 사용자가 원하는 대로 정보 창 디자인을 꾸밀 수 있습니다.

1. InfoWindowOptions의 borderWidth를 0으로 설정하여 테두리 디자인을 무시합니다.
2. backgroundColor를 transparent로 설정하여 배경색을 무시합니다.
3. 말꼬리를 없애기 위해 disableAnchor를 false로 설정합니다. disableAnchor 속성은 기본 말풍선 꼬리의 사용 여부입니다.
4. CSS 스타일을 설정해 원하는 대로 정보 창 요소를 디자인합니다.

다음은 NAVER 지도 API v3에서 제공하는 정보 창 디자인을 무시하고 CSS를 설정해 정보 창 디자인을 적용한 예제입니다.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.5698411, 126.9783927),
    zoom: 10
});

// 핀 요소
var infoWindowElement = $([
    '<div class="pin_nation">',
    '   <a href="http://www.naver.com/" target="_blank" class="pin_a">',
    '       <img src="./img/hi-seoul.jpg" width="38" height="26" alt="" class="pin_flag_m">',
    '       <span class="pin_txt"><em>캐나다</em> <span class="spr spr_arrow"></span></span>',
    '       <span class="spr spr_arr"></span>',
    '   </a>',
    '   <div class="pin"><span class="pin_blur"></span></div>',
    '</div>'].join(''));

var infowindow = new naver.maps.InfoWindow({

    content: infoWindowElement[0],

    borderWidth: 0,
    disableAnchor: true,
    backgroundColor: 'transparent',

    pixelOffset: new naver.maps.Point(0, -28),
});

naver.maps.Event.addListener(map, "click", function(e) {

    var latlng = e.latlng;

    infoWindowElement.find("em").text(latlng.toString());
    infowindow.open(map, latlng);
});

위 예제는 jQuery 구문을 포함하고 있습니다.