1. app key 발급받기
- https://apis.map.kakao.com/계정에서 카카오 계정으로 로그인한 후 발급 진행
- 우측 상단의 [app key 발급] 클릭
- 애플리케이션 추가하기 클릭
- 애플리케이션이 추가된 것을 확인하고, 해당 애플리케이션 클릭
- 앱 키의 JavaScript키가 사용할 app key이다
- 플랫폼 탭에서 Web 플랫폼 등록
- 사이트 도메인에 http://localhost입력 후 저장
- 내 경로는 http://localhost:8080/root/main/mainPage2이기 때문에 http://localhost:8080까지 써줘야 지도가 띄어진다.
- 저장이 잘 되었다면, 다음과 같은 화면이 되는데, 사용할 준비가 완료
2. Kakao Map Api 사용해 보기
- https://apis.map.kakao.com/web/guide/ 카카오에서 제공하는 가이드 참고
1. 지도가 생성될 영역 만들기
<div id="map" style="width: 500px; height: 400px;"></div>2. 실제 지도를 그리는 Javascript API를 불러오기
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=app_key"></script>- appkey=app_key 부분에 위에서 확인했던 본인의 app key를 넣는다.(da3de66ef64ff42d5b0dc40d2235b72a)
- 위의 코드를 head 태그 안이나, body 태그가 끝나기 전에 넣으면 된다.
3. 지도를 띄우는 코드 작성
<script type="text/javascript">
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
</script>- JS나 HTML Script 안에 넣어주면 된다. 다만, 2번에서 Javascript API를 불러오는 코드가 먼저 선행되어야만 함에 주의한다.
4. 전체코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KaKaoMap Study : olrlobt</title>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=00000000"></script>
<script type="text/javascript">
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
</script>
</body>
</html>5. Kakao Map Api 사용모습
