[API] 네이버 지도에서 정보 창 띄우기 [마커 클릭 시 정보 창 나타나고 사라지는 이벤트 만들기]

[API] 웹 페이지에 네이버 지도 띄우고 마커 찍기 [네이버 Maps API 사용하기]

---

- 네이버 지도에서 정보 창 띄우기

정보 창을 만들기 앞서, 지도와 마커를 생성한다.

// 서울시청으로 지도, 마커 띄우기
var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147),
    map = new naver.maps.Map('map', {
        center: cityhall.destinationPoint(0, 500),
        zoom: 15
    }),
    marker = new naver.maps.Marker({
        map: map,
        position: cityhall
    });

 

정보 창을 만들고, infowindow라는 변수에 담아서 정보 창을 띄운다.

// 정보 창 만들기
var contentString = [
        '<div class="iw_inner">',
        '   <h3>서울특별시청</h3>',
        '   <p>서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청<br />',
        '       <img src="./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
});

// 정보 창 띄우기
infowindow.open(map, marker);

 

마커 클릭 시, 정보 창을 열고 닫을 수 있는 이벤트도 구현한다.

// 마커 클릭 이벤트
naver.maps.Event.addListener(marker, "click", function(e) {
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});

---

- 전체 코드

// 서울시청으로 지도, 마커 띄우기
var cityhall = new naver.maps.LatLng(37.5666805, 126.9784147),
    map = new naver.maps.Map('map', {
        center: cityhall.destinationPoint(0, 500),
        zoom: 15
    }),
    marker = new naver.maps.Marker({
        map: map,
        position: cityhall
    });

// 정보 창 만들기
var contentString = [
        '<div class="iw_inner">',
        '   <h3>서울특별시청</h3>',
        '   <p>서울특별시 중구 태평로1가 31 | 서울특별시 중구 세종대로 110 서울특별시청<br />',
        '       <img src="./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
});

// 마커 클릭 이벤트
naver.maps.Event.addListener(marker, "click", function(e) {
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});

// 정보 창 띄우기
infowindow.open(map, marker);

---

네이버 지도에서 정보 창 띄우기

마커 클릭 시 정보 창 나타나고 사라지는 이벤트 만들기

---

- 참고자료

NAVER Maps API v3

---