- API 중 가장 기본적으로 쉽게 가져올 수 있는 카카오 맵 API를 겟잇 해보겠다.
여기서 하는 나의 기본적인 세팅은 이렇다.
- 기본적으로 대부분 api가 그렇듯이 자세한 방법을 제공해준다. 카카오에서도 마찬가지로 api와 다양한 라이브러리에 대한 설명을 제공한다. 사실 이 사이트가 더 정확하고 쉽다.
- Kakao Maps API - https://apis.map.kakao.com/
1. APP Key 가져오기
- 맨 처음 app key라는 것을 갖고와야한다. 링크의 사이트에서 확인하면 자신의 환경에 맞게 선택할 수 있다. 우린 Web을 선택하자.
- 사실상 차근차근 따라하면 해당 사이트가 더 좋다고 생각한다.
1-1. kakao developers 가입과 애플리케이션 등록
- 자신이 만드는 앱 이름을 넣어도 되고 아니면 구별할 수 있는 이름을 적는다. 그리고 저장한 후 해당 애플리케이션 클릭.
- 왼쪽의 플랫폼을 누르면 아래와 같은 내용이 보인다. Web플랫폼 등록
1-2. appkey 확인 후 복사
- 왼쪽 요약 정보를 보면 Key가 나오는데 우린 JavaScript를 사용할 것이므로 따로 복사를 해둔다.
2. jsp 파일 생성
- API 설명에 있는 그대로 가져왔다.
- 주의 해야될 점은 appkey 안에 아까 복사해 둔 key를 제대로 넣었는지와 이 script 태그가 실행 코드보다 먼저 선언되는지를 확인해야한다. 이 부분 때문에 안 나오는 게 대부분이다.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>kakaoMap</title>
</head>
<body>
<h1>kakaoMap</h1>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=이 곳에 appkey를 적어주세요."></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>
3. 완성
