네이버 지도 API 이용하기
네이버 지도 API키를 발급 받아야만이 사용 가능합니다.
발급 받을때는 사용할 도메인에 대해서 입력을 하기 때문에 키를 알아도 다른곳에 사용을 하기에는 무리가 있습니다.
API key 발급 홈페이지 : http://developer.naver.com/wiki/pages/OpenAPI
<script src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=API Key"></script>
네이버 지도 API 이용시에 X,Y 좌표가 필요하기때문에 꼭 X,Y 좌표를 알아서 입력해 주시기 바랍니다.
네이버 지도에서 좌표를 확일 할 수 있지만 API Key 가 있다면은 다음의 도메인으로 확인도 할 수 있습니다.
UTF-8 형식을 사용하기때문에 요청할때 한글 인코딩 처리를 해야 합니다.
http://openapi.map.naver.com/api/geocode?key=API Key&encoding=utf-8&coord=latlng&output=xml&query=한글 전체주소
위 주소로 요청할 경우에 다음과 같이 값이 리턴되어서 돌아 옵니다.
<geocode> <result> <userquery>서울특별시 영등포구 의사당대로 1 국회의사당</userquery> <total>1</total> <items> <item> <address>서울특별시 영등포구 의사당대로 1 국회</address> <addrdetail> <country>대한민국</country> <sido>서울특별시</sido> <sigugun>영등포구</sigugun> <dongmyun>의사당대로</dongmyun> <rest> 1 국회</rest> </addrdetail> <isRoadAddress>true</isRoadAddress> <point> <x>126.9141499</x> <y>37.5320453</y> </point> </item> </items> </result> </geocode>
위 값을 가지고 DB에 저장을 해도 좋으며, 바로 javaScript에 넣어서 호출해도 좋습니다.
<script> var oPoint = new nhn.api.map.LatLng('Y좌표', 'X좌표'); // Y, X var oMap = new nhn.api.map.Map(document.getElementById('map'), { point : oPoint, zoom : 11, enableWheelZoom : true, enableDragPan : true, enableDblClickZoom : true, mapMode : 0, activateTrafficMap : false, activateBicycleMap : false, activateRealtyMap : true, minMaxLevel : [ 1, 14 ], size : new nhn.api.map.Size(320,320)}); // 줌 컨트롤러 var oSlider = new nhn.api.map.ZoomControl(); oMap.addControl(oSlider); oSlider.setPosition({ top:15, left:15 }); //아래는 위에서 지정한 좌표에 마커를 표시하는 소스 입니다. 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 oLabel1 = new nhn.api.map.MarkerLabel(); // 마커 라벨 선언 oMap.addOverlay(oLabel1);// 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨 oLabel1.setVisible(true, oMarker);// 마커 라벨 보이기 </script>
웹사이트를 만들때 사용한 부분인데 현재 잘 작동하는지는 알 수 없습니다.
하지만 좀 더 사용해 보면은 큰 도움이 될 정보일듯 해서 기록은 해 놓지만은 정확히 않음을 미리 공지 합니다.
지도 확대보기 사용하기 : http://map.naver.com/?dlevel=12&pinType=site&pinId=&x=X좌표&y=Y좌표&enc=b64
네이버 지도 길 찾기 URL : http://m.map.naver.com/route.nhn?menu=route&&ename=네이버 정식 명칭&ex=X좌표&ey=Y좌표
혹시 이번년도 들어와서 바뀐 인증방식으로 수정하셨는지요..
블로그에는 불규칙으로 접속을 하여서 이제서야 봤습니다.
이번년도 2016년도에 들어와서는 바뀐 인증방식에 대해서 알아보지 않았습니다.
저도 작년(2015)에 하고는 글 작성후에 다시 재 작성을 하지 않아서요