상세 컨텐츠

본문 제목

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

헉!!/javascript

by 권태성 2013. 3. 7. 11:05

본문

네이버 지도 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로 키 발급 신청을 해서 테스트 하시고 실서버에 올리실때 키를 바꿔주셔야 합니다.




관련글 더보기