카카오 지도 API
스프링에서 카카오 지도 API를 활용하는 법을 기록해 볼려고 한다.
-
일단 https://apis.map.kakao.com/ 여기서 APP KEY 발급을 누른다.
-
그리고 카카오 로그인을 진행 한 후에
- 애플리케이션 추가하기를 누른다.
그리고 [플랫폼] -> 사이트 도메인을 추가한다.
로컬 환경에서 진행하려면 https://localhost:8080 를 입력하면 된다.
- 그리고 [앱키] 로 들어가 JavaScript 키를 복사하면 된다.
그리고 이제 카카오 지도를 만들면 되는데 그거에 대한 가이드는
https://apis.map.kakao.com/web/guide/ 여기에서 잘 안내하고 있다.
실제 지도를 그리는 Javascript API를 불러오기
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>지도를 띄우는 코드 작성
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); //지도 생성 및 객체 리턴전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</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=발급받은 APP KEY를 넣으시면 됩니다."></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>
노력은 배신하지 않아 🔥