네이버 지도 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)