1. KAKAO API 사이트 접속 후 로그인
https://apis.map.kakao.com/
2. 애플리케이션 추가하기
1) 로그인하면 다음과 같은 창이 나오는데, 여기서 '애플리케이션 추가' 클릭
2) 앱 이름과 사업자명을 입력하고 저장
3) JavaScript Key 복사
위의 작업을 하고 나면, 앱 키, 플랫폼, 앱 ID가 제공된다.
📌 파이썬을 이용해 웹에서 동작시키려는 것이므로 JavaScript 키를 복사해두기
3. 플랫폼 생성
1) 플랫폼 클릭
2) 플랫폼 등록
사이트와 기본 도메인을 입력하고 저장!
📌 Pythonanywhere에 올릴 때, KAKAO에 접속하여
플랫폼 > 사이트 도메인 추가 에서 해당하는 URL을 등록
4. 지도 생성(1)
다시 https://apis.map.kakao.com/ 로 돌아와서.
1) 웹에 Map 서비스를 만들 것이므로 Web 클릭
2) sample 클릭
3) 지도 생성하기 클릭
👉 여기서, 지도를 생성하기 전에 해야 할 작업!
python으로 넘어가서..
1) 먼저 카카오 지도 사용을 위해 home.html의 <head>와 </head>사이에 입력
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script> 2) views.py에 입력
@request_mapping("/geo", method="get")
def geo(self, request):
context = {
'center': 'geo.html'
}
return render(request, 'home.html', context);5. 지도 생성(2)
1) templates에 새롭게 geo.html(이름은 자기 마음대로) 생성
2) 위의 코드를 복사해서 <Script>와 </Script> 사이에 붙여넣기
# CSS
<style>
#map{
margin:0 auto;
width:400px;
height:400px;
}
</style>
# JavaScript
<script>
$(document).ready(function(){
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 8 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
# HTML
<section>
<h1>Map</h1>
<button id="s">Seoul</button><button id="b">Busan</button>
<div id="map"></div>
</section>
🔍 참고!
https://www.google.com/maps위의 주소에 들어가서 원하는 위치 검색하고 마우스로 그 위치를 찍으면 해당 좌표를 얻을 수 있다.
👩💻 기록 및 복습을 위함