[JavaScript] 네이버 지도 API 이용하기

219월 2015 by Truds 2 Comments

네이버 지도 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좌표

◀이전글

다음글▶

[JavaScript] 네이버 지도 API 이용하기

2 thoughts on “[JavaScript] 네이버 지도 API 이용하기”

답글 남기기 응답 취소