태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

나만의 네이버 지도 만들기, 지도 API 매쉬업(Mashup)

13년 전

네이버 지도 API 를 활용해서 지도를 만드는 비교적 간단한 샘플입니다. 아래 소개된 소스 코드를 실행하면 100개의 마커가 뿌려지고 해당 마커를 클릭하면 이미지를 보여주는 다음과 같은 실행 화면을 확인할 수 있습니다. 자신의 홈페이지에서 테스트 하기 위해서는 네이버 지도 API 키를 해당 홈페이지 (http://dev.naver.com/openapi/register) 에서 얻을 수 있으며 키 값($naver_map_api_key)을 얻은 API 키로 교체해야 합니다. 참고로 구글 지도 API에도 관심이 있는 분은 앞서 소개한 "자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)" 포스트도 참고하세요.

[실행 화면] 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>

추천 목록

번호	제목
65	IIS에서 JSP or Java Servlet 돌리는 방법 1
64	톰캣(Tomcat)의 기능 개요 및 설치 방법
63	내용복사시 출처 자동넣기
62	Flash와 PHP를 활용하여 멀티 파일 업로드 구현하는 방법
61	linux 시간 맞추기
60	야후 세계 지도 활용하기, 야후 거기 지도 오픈 API 매시업
59	다음 지도를 내 것으로 만들기, 다음 지도 API 매쉬업
	나만의 네이버 지도 만들기, 지도 API 매쉬업(Mashup)
57	자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)
56	jQuery 로 텍스트 입력 박스(TextArea)에 크기 조절 막대 추가하기.
55	접근성을 해치지 않는 자바스크립트의 사용
54	display: [inline, block, none]
53	CSS line-height 속성, vertical-align 속성
52	CSS float 속성, clear 속성, z-index 속성
51	CSS display 속성, position 속성
50	CSS 마진(margin) 속성, 패딩(padding) 속성
49	CSS overflow 속성, clip 속성, visibility 속성
48	IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기
47	IE 7 에서 dt, dd 좌측여백이 생기는 문제
46	CSS visibility vs display
45	파이어폭스 에서 핸드 커서 안될때. cursor:hand -> cursor:pointer
44	CSS 포지셔닝(Positioning)
43	CSS에서 브라우저 구별 (IE6, IE7, FIREFOX)
42	CSS3 소개
41	Useful CSS Tips For Beginners
40	자주 쓰는 내장함수 (VisualBasic6)
39	브라우저 버전체크 - IE Conditional Comments 필터링
38	브라우저 버전(IE7 vs IE6)에 따라 Layer Y 좌표 위치 변동
37	레이어 절대좌표/ 상대좌표
36	웹표준 DTD선언문