네이버 지도 API 사용

2022/05/02

 

네이버 지도를 사용하기 위해선 네이버에서 제공해 주는 API를 이용하면 된다.

유료 서비스지만, 기준 사용량을 넘어야 결제 되는 것이라 사실상 무료라고 볼수 있다.(개인사용자 기준)

 

먼저 네이버 클라우드 플렛폼에 회원가입과 결제수단을 등록 한다.

네이버 클라우드 플랫폼의 서비스에서 Maps 이용신청하기

Naver cloud platfrom console 페이지에서 Application 등록을 눌러서 Maps를 추가한다

일반적이고 가장 많이 쓰이는 WEB DYNAMIC MAP을 선택

지도를 구현할 사이트의 주소를 입력 하고(http// 포로토콜도 함께)

등록이 됬다면

인증정보에서 Client ID를 복사 해준다.

 

https://navermaps.github.io/maps.js.ncp/

NAVER Maps API v3

공식문서에서 코드를 확인하고 내 HTML 태그에 넣어주면 사용 가능함

 

이때, SCRIPT 태그 안에 YOUR_CLIENT_ID 란을 수정(내 Client ID로 변경)

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>

위 태그는 HEAD태그 안에 위치

<div id="map" style="width: 100%; height:480px;"></div>

위 태그는 지도를 삽일할 DOM요소 이니 body에 위치

<script type="text/javascript">
function initMap() {
    map = new naver.maps.Map('map', {
        center: new naver.maps.LatLng(37.3595704, 127.105399),
        scaleControl: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: naver.maps.MapTypeControlStyle.BUTTON,
            position: naver.maps.Position.TOP_LEFT
        },
        zoomControl: true,
        zoomControlOptions: {
            style: naver.maps.ZoomControlStyle.SMALL,
            position: naver.maps.Position.TOP_RIGHT
        },
        zoom: 15
    });
    var marker = new naver.maps.Marker({
        position: new naver.maps.LatLng(37.3595704, 127.105399),
        map: map
    });
}
</script>

위 태그는 지도 옵션을 설정하는 스크립트

 

더 다양한 옵션은 공식 문서 참고!

 

// 참고

https://www.ppcle.com/blog/naver-maps-api-v3/

피클웹