네이버 지도 API 활용 지역정보 오버레이 삽입 방법

네이버 지도에서 기본적으로 제공하는 정보창을 표시하는 것은 기본 기능으로 제공하지 않는 것으로 보이며, 이를 구현하기 위해서는 다음과 같이 네이버 API 문서에서 제공하는 것과 같이 커스텀 디자인으로 구현이 필요한 것으로 보인다.

 

var HOME_PATH = window.HOME_PATH || '.';
var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147),
    map = new naver.maps.Map('map', {
        center: cityhall,
        zoom: 10
    }),
    marker = new naver.maps.Marker({
        map: map,
        position: cityhall
    });

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

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);
    }
});

 

infowindow 객체의 속성들을 수정함으로써 기본 말풍선의 디자인을 수정할 수 있으며, content에 들어가는 마크업 언어를 수정함으로써 내용과 스타일의 커스텀이 가능하다. 스타일을 할당해 CSS를 수정함으로써 디자인 수정이 가능하다.

참고자료

NAVER Maps API v3