네이버 지도 API 를 활용해서 지도를 만드는 비교적 간단한 샘플입니다. 아래 소개된 소스 코드를 실행하면 100개의 마커가 뿌려지고 해당 마커를 클릭하면 이미지를 보여주는 다음과 같은 실행 화면을 확인할 수 있습니다. 자신의 홈페이지에서 테스트 하기 위해서는 네이버 지도 API 키를 해당 홈페이지 (http://dev.naver.com/openapi/register) 에서 얻을 수 있으며 키 값($naver_map_api_key)을 얻은 API 키로 교체해야 합니다. 참고로 구글 지도 API에도 관심이 있는 분은 앞서 소개한 "자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)" 포스트도 참고하세요.
[실행 화면] http://www.hompydesign.com/map/naver.html
[소스 코드]
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/581
(0) 
(0)
[실행 화면] http://www.hompydesign.com/map/naver.html
[소스 코드]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?=$hompy_title?></title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://map.naver.com/js/naverMap.naver?key=<?=$naver_map_api_key?>"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
.window_image {border:1px solid #cccccc; width:140px; height:100px;}
</style>
<script type="text/javascript">
var map;
var tm128 = new NPoint(315741,544301);
var latlng;
var person_list;
var infowin;
$(document).ready(function(){
display_loading();
map = new NMap($('#map_canvas')[0],578,460);
map.setCenterAndZoom(tm128, 4);
//map.addControl(new NIndexMap());
map.addControl(new NZoomControl());
map.addControl(new NMapBtns());
map.enableWheelZoom();
for (record in person_list) {
display_marker(person_list[record]);
}
display_marker({user:0,lon:127.046,lat:37.5066});
map.setCenter(latlng);
NEvent.addListener(map,"click",function (latlng){
if (infowin) map.removeOverlay(infowin);
});
NEvent.addListener(map,"startDrag",function (latlng){
if (infowin) map.removeOverlay(infowin);
});
setTimeout(display_loaded, 1000);
});
function transFromTM128ToLatLng() {
latlng = map.fromTM128ToLatLng(tm128);
document.getElementById("display").innerHTML = latlng;
}
function moveLatLng() {
map.setCenter(latlng);
}
function display_marker(record) {
latlng = new NLatLng(record.lat, record.lon);
var marker = new NMark(latlng, new NIcon('http://static.naver.com/maps/ic_spot.png',new NSize(52,41),new NSize(14,40)));
var html = '<a href="http://hompy.info/580"><img src="/hompydesign.com?seq='+record.user+'" class="window_image"></a>';
map.addOverlay(marker);
NEvent.addListener(marker,"click",function (latlng){
if (infowin) map.removeOverlay(infowin);
infowin = new NInfoWindow();
map.addOverlay(infowin);
infowin.set(latlng, "<TABLE style='width:100px;height:50px;background-color:#FFFFFF; border:solid 1px #666666'><TR><TD>"+html+"</TD></TR></TABLE>");
infowin.showWindow();
//NEvent.addListener(infowin,"mouseout",function () {infowin.hideWindow();});
});
}
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
</script>
</head>
<body>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?=$hompy_title?></title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="http://map.naver.com/js/naverMap.naver?key=<?=$naver_map_api_key?>"></script>
<style type="text/css">
#map_box {position:relative;}
#map_canvas { width: 578px; height: 460px; margin: 0; padding: 0; border: 0; }
#map_box {width:578px; border: 4px solid #cccccc; padding:2px;}
#display_loading_box {width:578px; height:460px; position:absolute; background-color:#000000; z-index:1000; opacity: 0.5; filter: alpha(opacity = 50);}
#display_loading_box_icon {margin: 214px 273px; width:32px; height:32px;}
body,td,tr { font-size:12px; font-family:돋움,verdana,arial,sans serif;}
.window_image {border:1px solid #cccccc; width:140px; height:100px;}
</style>
<script type="text/javascript">
var map;
var tm128 = new NPoint(315741,544301);
var latlng;
var person_list;
var infowin;
$(document).ready(function(){
display_loading();
map = new NMap($('#map_canvas')[0],578,460);
map.setCenterAndZoom(tm128, 4);
//map.addControl(new NIndexMap());
map.addControl(new NZoomControl());
map.addControl(new NMapBtns());
map.enableWheelZoom();
for (record in person_list) {
display_marker(person_list[record]);
}
display_marker({user:0,lon:127.046,lat:37.5066});
map.setCenter(latlng);
NEvent.addListener(map,"click",function (latlng){
if (infowin) map.removeOverlay(infowin);
});
NEvent.addListener(map,"startDrag",function (latlng){
if (infowin) map.removeOverlay(infowin);
});
setTimeout(display_loaded, 1000);
});
function transFromTM128ToLatLng() {
latlng = map.fromTM128ToLatLng(tm128);
document.getElementById("display").innerHTML = latlng;
}
function moveLatLng() {
map.setCenter(latlng);
}
function display_marker(record) {
latlng = new NLatLng(record.lat, record.lon);
var marker = new NMark(latlng, new NIcon('http://static.naver.com/maps/ic_spot.png',new NSize(52,41),new NSize(14,40)));
var html = '<a href="http://hompy.info/580"><img src="/hompydesign.com?seq='+record.user+'" class="window_image"></a>';
map.addOverlay(marker);
NEvent.addListener(marker,"click",function (latlng){
if (infowin) map.removeOverlay(infowin);
infowin = new NInfoWindow();
map.addOverlay(infowin);
infowin.set(latlng, "<TABLE style='width:100px;height:50px;background-color:#FFFFFF; border:solid 1px #666666'><TR><TD>"+html+"</TD></TR></TABLE>");
infowin.showWindow();
//NEvent.addListener(infowin,"mouseout",function () {infowin.hideWindow();});
});
}
function display_loading(){
var html = "<div id='display_loading_box'><img src='images/loading.gif' id='display_loading_box_icon' /></div>";
$('#map_canvas').before(html);
}
function display_loaded(){
$('#display_loading_box').remove();
}
person_list =
[{user:1,lon:127.034,lat:37.5059},{user:2,lon:127.029,lat:37.5125},{user:3,lon:127.032,lat:37.5306},{user:4,lon:127.034,lat:37.4994},{user:5,lon:127.036,lat:37.5169}];
</script>
</head>
<body>
<div id="map_box">
<div class="map" id="map_canvas"></div>
</div>
</body>
</html>
웹프로그래머의 홈페이지 정보 블로그 http://hompy.info/581
(0) (0)
댓글을 달아 주세요
잘 보고 갑니다.
유용한 자료 감사합니다.
그런데 저기 이미지는 어디서가져 왔는지요..ㅜㅜ
직접 링크를 시키셨나요?
person_list = [{user:1,lon:127.034,lat:37.5059},
소스를 보니 수동으로 5개를 넣는 소스 이더군요..
db에 있는 자료의 주소값을 수시로 예를 들어 강남구 역삼동 124,124,125 ......
처럼 주소값을 lon,lat처럼 위치값으로 어떻게 변화를 시키나요...
네이버의 geocode.php는 일일히 한개의 주소값(서울시 강남구 역삼동)을
대입시켜 x,y값만을 뽑아 와야 하는데 여기의 lon,lat값은 사용자가
어떻게 입력(주소를 lon,lat)값으로 변환시킬수 있나요...
간절히 부탁드립니다. 일주일 내내 삽집하니 너무 지쳐서요...