PVS :: [NaverMap] Naver Map 을 뿌려보자 !!

글을 다 날려서 다시 적는다. !!  (2009-05-06에 날림) 

2007/06/22 23:32   원본보기

국내 Open API 중의 하나인 Naver API .

그 중에서 가장 인기 좋은(?) Map Open API 에 대해서 구현해 보았다.

Map Open API 키 받기

Open API 를 사용하기 위해서는 Naver 에서 키를 받아야 한다.

주소 : http://openapi.naver.com/register.nhn   에서 키를 받자.

참고 링크 : http://openapi.naver.com/page.nhn?PageId=3_02_2


키 부여

<script type="text/JavaScript"           
          src="http://maps.naver.com/js/naverMap.naver?key=부여받은 NaverMap Key"></script>

뿌릴 부분

<div id='mapContainer' style='width:가로크기 ;  height: 세로크기 '></div>

 

<div id='mapContainer' style='width:300px;height:300px'></div>

객체 생성

var 변수명 = new NMap(document.getElementById('mapContainer'),
                 가로크기, 세로크기 );

var mapObj = new NMap(document.getElementById('mapContainer'),300,300);

표시될 위치 및 ZOOM 레벨 정하기

변수명.setCenterAndZoom(new NPoint(맵 포인트 ), Zoom 레벨 );

Tip : 해당 맵 포인트는 http://mmap.tistory.com/  에서 얻을 수 있다.

mapObj.setCenterAndZoom(new NPoint(321198,529730),3);

확대, 축소 컨트롤 생성

var zoom = new NZoomControl();                 // 컨트롤을 생성
zoom.setAlign("right");                               // 컨트롤 위치 정하기
zoom.setValign("bottom");
mapObj.addControl(zoom);                         // 컨트롤 추가하기