태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

나만의 네이버 지도 만들기, 지도 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>

추천 목록

번호	제목
1,235	엑세스 함수
1,234	함수
1,233	[script] iframe 자동리사이즈(파이어폭스, 익스 지원)
1,232	IFRAME-x 이용한 InnerBrowsig
1,231	javascript timer
1,230	올플래시 사이트에서 iframe 으로 게시판 올리기
1,229	linux 시간 맞추기
1,228	리눅스 하드디스크 배드 블럭 점검 badblocks
1,227	PHP로 FTP프로그램 만들기 알고리즘
1,226	날짜, 시간 계산하기
1,225	반드시 알아아 할 PHP 보안 30가지
1,224	[PHP] $_SESSION 변수를 이용한 장바구니
1,223	[PHP] header("Pragma:no-cache")
1,222	[PHP] 제어 구조 - foreach 배열 as 변수
1,221	PHP 시간관련함수 및 사용법 (사용기간, 사용일수, 특정일 계산법)
1,220	HTML과 자바스크립트에서 스타일시트 속성
1,219	jQuery 애니메이트로 만들어보는 이미지 슬라이더와 전광판
1,218	야후 세계 지도 활용하기, 야후 거기 지도 오픈 API 매시업
1,217	다음 지도를 내 것으로 만들기, 다음 지도 API 매쉬업
	나만의 네이버 지도 만들기, 지도 API 매쉬업(Mashup)
1,215	자바스크립트로 지도 만들기, 구글 지도 API 매시업(Mashup)
1,214	jQuery 로 텍스트 입력 박스(TextArea)에 크기 조절 막대 추가하기.
1,213	PHP 시간 관련 함수를 써서 시간 차이 계산하기, DATEDIFF
1,212	[PHP] 시간 날짜 함수
1,211	게시판 자동등록 방지 팁입니다
1,210	무단링크 방지 방법
1,209	Base62 Encode
1,208	CDATA 섹션[XML 표준]
1,207	window.onload
1,206	JavaScript로 자신의 URL 알기