Web개발 :: 네이버 지도 Web Dynamic map API 적용하기 _TIL69

■ JITHub 개발일지 69일차

□  TIL(Today I Learned) ::

네이버 지도 Web Dynamic map API 적용하기

 - 프로젝트를 진행하다 보니 하루에도 수많은 부분들을 배우고 채울 수 있었다.

---

 1. 네이버 지도 API 적용 [*참고) 네이버 클라우드 플랫폼(링크)]
  - 네이버 지도 API를 적용하려면 우선 네이버 클라우드 플랫폼에 가입 후 결제정보를 등록하여야 한다.
  - 등록 완료 후 "Web Dynamic Map"이라는 API 상품을 선택하고, 사용하고자 하는 Web URL을 작성하여 등록한다. 현재는 로컬 페이지에서 동작이 되는지 확인하고있기 때문에 로컬 BASEURL로 적어두었다.

  - 지도 API를 가져오려면 ClientID를 확인하고 아래 링크에 따라 Map을 셋팅, 배치하면 된다.(*링크)

  1) Naver 지도 API v3 로드

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

  2) 지도 DOM 요소 지정

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

  3) 지도 옵션 설정

var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
}

  4) 지도 생성

// 옵션 직접 설정시
var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
});

// 옵션 불러오기시
var map = new naver.maps.Map('map', mapOptiopns);

  - 지도 생성 뿐 아니라 마커 모양, 지도 데이터 가져오기 등도 가능한 것으로 확인했다. 잘 참고하여 우리 프로젝트에도 반영해볼 예정이다.

  - 아래 좋은 레퍼런스들이 있어 참고하였다.

  1) 웹프로그래밍 네이버 지도 API 사용 (*링크)

  2) 네이버 지도 api를 사용하기 위한 키(Client ID) 생성하기 (*링크)

  3) [javascript] 네이버지도 연동하기(Naver Map) (*링크)

  4) [Naver Maps API] 네이버 맵 API 지도 마커표시 예제 (*링크)