코딩공부/Python Django

django KaKao 지도 API 적용하기

integerJI 2020. 6. 27. 19:59

https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

카카오 디벨로퍼 사이트에 가입을 하면 여러가지 api를 사용할 수 있습니다.

 

카카오 외에도 네이버, 구글 등등..

 

 

로그인을 했다면 시작하기 클릭

 

 

 

먼저 애플리케이션을 추가해 줍시다.

 

 

 

이제 app을 사용할수 있는 계정이 만들어 졌습니다.

 

ID는 혹시 몰라서 가렸습니다.

 

해당 계정을 눌러 들어가 보면

 

 

이렇게 api를 사용 할수 있는 키를 줍니다.

 

이런 키같은건 잘 보관해 주세요

 

이제 아래에 있는 플랫폼 설정하기를 눌러줍니다.

 

 

Web 플랫폼 등록

 

 

플랫폼에 사용할 도메인을 넣어줍니다.

 

저는 로컬에서 돌릴 예정으로 http://127.0.0.1:8000를 넣어주엇습니다.

 

 

 

https://apis.map.kakao.com/web/guide/#step2

이제 해당 사이트에 들어가서 가이드 라인을 따라줍니다.

 

<!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>

 

발급받은 자바스크립트 키를 appkey에 넣어주면 이제 지도가 나옵니다.

 

 

이렇게 카카오 지도를 가져오는데 성공 했구

 

 

더 다양한 지도를 이용하려면 

 

https://apis.map.kakao.com/web/sample/

 

샘플들을 이용하여 만드시면 됩니다.

 

 

---

 

글 다듬기