- 네이버 지도에서 정보 창 띄우기
정보 창을 만들기 앞서, 지도와 마커를 생성한다.
// 서울시청으로 지도, 마커 띄우기
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 | 공공,사회기관 > 특별,광역시청<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 | 공공,사회기관 > 특별,광역시청<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);