네이버 지도 api 사용하기

<script type="text/javascript" src="http://map.naver.com/js/naverMap.naver?key=네이버에서발급받은키값"></script>
<div id="map">
</div>
<div id="display">
</div>
<!--
<input type="button" value="좌표변환" onclick="transFromTM128ToLatLng();">
<input type="button" value="이동" onclick="moveLatLng();">
<input type="button" value="표시" onclick="showMark();">
<input type="button" value="좌표오류" onclick="moveError();">
-->
<script type="text/javascript">

/*
 * 지도API 2.0은 기존의 카텍 좌표 외에도 위경도 좌표를 지원합니다.
 * 위경도 좌표를 사용하기 위해서는 기존의 NPoint 클래스 대신 NLatLng 클래스를 사용해야 합니다.
 *
 * http://maps.naver.com/api/geocode.php 에서 "경기도성남시정자1동25-1"을 검색한 결과인
 * x : 321033, y : 529749
 * 를 예로 들어 설명해 보겠습니다.
 *
 * 편의를 위해 전역변수로 mapObj, tm128, latlng를 선언해 두었습니다.
 */
var mapObj = new NMap(document.getElementById('map'),300,250);
var tm128 = new NPoint(283307,552335);
var save = new NSaveBtn();
var latlng;

/*
 * 경기도성남시정자1동25-1의 위치로 이동합니다. 레벨은 1로 지정하였습니다.
 * 인덱스맵과 확대/축소 컨트롤러를 등록하고 마우스 줌인/아웃을 활성화 하였습니다.
 */
mapObj.setCenterAndZoom(tm128, 1);
mapObj.addControl(new NZoomControl());
mapObj.enableWheelZoom();
mapObj.addControl(save);

latlng = mapObj.fromTM128ToLatLng(tm128);
var mark = new NMark(latlng, new NIcon('http://static.naver.com/maps/ic_spot.png',new NSize(52,41),new NSize(14,40)));
 mapObj.addOverlay(mark);
/*
 * 정자1동25-1의 tm128 좌표를 위경도로 변경하여 display div에 표시하도록 하였습니다.
 * 위경도를 tm128 좌표로 변경하려면 fromLatLngToTM128 메소드를 사용해야 합니다.
 */           
function transFromTM128ToLatLng()
{
latlng = mapObj.fromTM128ToLatLng(tm128);
document.getElementById("display").innerHTML = latlng;
}
/*
 * NPoint가 사용되는 곳이면 NLatLng을 대신해서 사용할 수 있습니다.
 */           
function moveLatLng()
{
mapObj.setCenter(latlng);
}
/*
 * NMark도 마찬가지로 tm128 대신 위경도를 사용하여 아이콘을 표시하였습니다.
 */           
function showMark()
{
var mark = new NMark(latlng, new NIcon('http://static.naver.com/maps/ic_spot.png',new NSize(52,41),new NSize(14,40)));
 mapObj.addOverlay(mark);
}

/*
 * NLatLng에 위경도가 아닌 tm128 좌표를 넣게되면 예상치 못한 결과가 나오게 됩니다.
 * 카텍 좌표는 NPoint, 위경도 좌표는 NLatLng를 사용해야 함을 잊지마세요.
 * 그리고 NLatLng는 (lat, lng)를 아규먼트로 받습니다.
 * 위도(y), 경도(x)의 순으로 아규먼트를 넣어야 합니다. 이점도 주의하세요.
 */           
 function moveError()
{
 var errPoint = new NLatLng(tm128.y, tm128.x);
 mapObj.setCenter(errPoint)
}
</script>