# 지도 API 적용하기 ## 목차 1. 준비하기 2. 지도 영역 만들기 3. 지도 라이브러리 둘러보기 4. 지도에 다양한 기능을 수행하려면? ## 준비하기 다음 지도 API를 사용하기 위해서는 아래의 준비과정을 거쳐야 한다. (참조: [다음 지도 API 가이드](http://apis.map.daum.net/web/guide/)) 1. 개발자 사이트 접속 2. 개발자 등록 및 앱 생성 3. 웹 플랫폼 추가 4. 사이트 도메인 등록 5. JS API 키 발급(개발자 등록시 자동발급) 위의 준비과정을 마쳤다면 본격적으로 지도 API를 활용해보자. ## 지도 영역 만들기 header의 navbar영역에 지도 버튼을 추가.  `static/location.jsp`파일에 지도 영역을 추가. ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <div class="jumbotron"> <h1>Hello Location!</h1> <p>views/statics/location.jsp</p> </div> <div id="map" style="width:500px;height:400px;"></div> ``` 위치 버튼을 클릭하면 해당 페이지가 보이도록 컨트롤러에 메소드를 작성. ``` @RequestMapping(value = "/location", method = RequestMethod.GET) public String location() { return "statics/location"; } ``` ## JS API 불러오기 실제 지도를 그리기 위해 자바스크립트 라이브러리를 로드. ``` ``` ## 지도를 띠워보자 ``` var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new daum.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3 //지도의 레벨(확대, 축소 정도) }; var map = new daum.maps.Map(container, options); //지도 생성 및 객체 리턴 ``` 아래와 같은 화면이 나왔다면 성공!  ## 지도 라이브러리 둘러보기 위에서 만든 지도에 추가로 아래의 기능을 사용하려면 라이브러리를 불러와야 한다. + `clusterer`: 마커를 클러스터링 할 수 있는 라이브러리 + `services`: 장소 검색과 주소-좌표 변환 라이브러리 + `drawing`: 지도 위에 마커와 그래픽스 객체를 쉽게 그리게 하는 라이브러리 라이브러리를 불러오는 코드는 아래와 같다. ``` <!-- services와 clusterer, drawing 라이브러리 불러오기 --> ``` ## 지도에 다양한 기능을 수행하려면? 지도 API를 이용해 아래의 기능들 또한 수행할 수 있다. + 지도 바로가기 + 길찾기 바로가기 + 로드뷰 바로가기 + 지도 검색결과 바로가기 자세한 내용은 레퍼런스를 참조한다. ## 레퍼런스 1. 다음 지도 API 가이드 (http://apis.map.daum.net/web/guide/)