[API] 네이버 지도 API 사용방법(웹용)

네이버 지도 API를 적용방법 (웹)

1. https://dev.naver.com/openapi/register 에서 지도API 키를 발급 받습니다.

2. 페이지 헤더에 아래 코드를 추가 합니다.

<script type="text/javascript">

try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}

</script>

<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=발급 받은 지도API 키"></script>

3. 지도를 표시할 div를 하나 만들어주고 지도 생성 스크립트를 넣어줍니다.

<div class="mapBox" id="map"></div> //지도가 들어갈 div

<script type="text/javascript">

var oPoint = new nhn.api.map.LatLng(35.8446585, 128.5592607); //LatLng 값이 y, x 좌표

nhn.api.map.setDefaultPoint('LatLng');

oMap = new nhn.api.map.Map('map' ,{ //표시될 div의 id 입니다.

point : oPoint,

zoom : 11, //기본 지도 줌 크기

enableWheelZoom : true,

enableDragPan : true,

enableDblClickZoom : false,

mapMode : 0,

activateTrafficMap : false,

activateBicycleMap : false,

minMaxLevel : [ 1, 14 ],

size : new nhn.api.map.Size(690, 338) //표시될 지도 크기

});

//아래는 위에서 지정한 좌표에 마커를 표시하는 소스 입니다.

var oSize = new nhn.api.map.Size(28, 37);

var oOffset = new nhn.api.map.Size(14, 37);

var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);

    //icon 이미지를 바꿔서 사용할 수 있습니다.

var oMarker = new nhn.api.map.Marker(oIcon, { title : '타이틀' }); 

oMarker.setPoint(oPoint);

oMap.addOverlay(oMarker);

//아래는 사이드에 줌 컨트롤을 추가하는 소스 입니다.

var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언

mapZoom.setPosition({left:20, bottom:40}); // - 줌 컨트롤 위치 지정

oMap.addControl(mapZoom); // - 줌 컨트롤 추가.

</script>

사용해보니 간단하기는 한데 정리해봤습니다.

마지막으로 키 발급시 중요한게 사용 도메인을 적어야하는데 로컬에서 작업할때는 127.0.0.1로 키 발급 신청을 해서 테스트 하시고 실서버에 올리실때 키를 바꿔주셔야 합니다.