Naver Maps Javascript API v3를 사용해보자

커뮤니티를 보다가 어떤 사이트에서 네이버 지도를 이용하여 개발된 사이트를 봤는데, 속도가 엄청 빨랐다.

어플만 이용하다가 오랜만에 API를 사용한 세이트를 본 것이지만, 뭐 컴퓨터 사양에 따라 다를지도 모르지만,

엄청 빨랐다. 그래서 궁금해서 네이버 개발자 사이트에 들어가니 버전 3가 나와있다. 한번 해봐야지.

네이버 API는 초기에 잠깐 해보고 오랜만이라 뭔가 생소하게 바뀐 느낌이 든다. 먼저 Client ID가 필요하니 발급받으러 다음 URL로 들어간다.

https://developers.naver.com/register

애플리케이션 등록 페이지이다. 애플리케이션 이름을 넣고 카테고리를 고른 후, 이용목적을 비로그인 오픈API로 하였다. 그러면 서비스 환경 설정이 나오는데, 필요한 부분을 선택하자. 아마도 다른 API와 비슷하다면 웹에서 사용할 경우 웹서비스 URL이 다르면 사용이 불가능할 가능성이 있으니 여기 등록해주자. 휴대폰 인증을 받으면 등록이 된다. 등록 후에 내 애플리케이션 관리 화면에서 Client DI를 확인할 수 있다.

API 사용은 아래 경로에서 확인할 수 있다.

https://navermaps.github.io/maps.js/docs/tutorial-0-Getting-Started.html

페이지에 아래 코드만 넣으면 결과를 확인할 수 있다.

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

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

<script type="text/javascript">

var mapOptions = {

    center: new naver.maps.LatLng(37.3595704, 127.105399),

    zoom: 10

}

var map = new naver.maps.Map('map', mapOptions );

</script>

결과 화면

여기까지만 하면 바로 지도를 불러올 수 있다. 붉은 글씨로된 YOUR_CLIENT_ID만 본인 걸로 바꿔주면 된다. 

옵션을 간단하게 보면, center는 시작위치의 좌표값이고 zoom은 지도의 초기 줌 레벨이다. 지도가 생성되는 div의 사이즈가 가로 100% 세로 400px이기 때문에 초기 생성 사이즈는 여기에 맞춰 생성되는 것으로 보이나 옵션으로 지도의 초기 크기도 지정할 수 있다.

몇가지 예제를 보니 이런저런 기능이 많다. 예제도 있고 좋은데, 단지 예제에 주석이 없는게 아쉽다.