-
Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(1) – Kakao Map APINode 2021. 4. 27. 19:17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script> <title>OLLOC</title> </head> <body> <div id="map" style="height:400px; margin-bottom: 30px;"></div> <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> <div id="root"></div> </body> </html>무슨 API를 선택하지?
지도기반의 SNS를 만들기 위해 지도 API를 사용하려 했는데 Google map API는 유료의 향기가 나서 Kakao map API를 사용하기로 했다.
Kakao Maps API 사용하기
향 후 mobile Application을 제작하게 되도 충분히 활용할 수 있을 것 같은 굉장히 만족스러운 첫인상.Kakao 지도 Javascript API는 키 발급을 받아야 사용할 수 있다.
그리고 키를 발급 받기 위해서는 카카오 계정이 필요하다.키 발급에는 아래 과정이 필요하다.
-
-
- 카카오 개발자사이트 접속
- 개발자 등록 및 앱 생성
- 웹 플랫폼 추가: 앱 선택 – [설정] – [일반] – [플랫폼 추가] – 웹 선택 후 추가
- . 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)
- 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.
- 앱을 실행합니다.
-
실제 사용 방법
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script> <title>OLLOC</title> </head> <body> <div id="map" style="height:400px; margin-bottom: 30px;"></div> <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> <div id="root"></div> </body> </html>위와같이 작성하면 아래와 같이 지도를 띄울 수 있다.
'Node' 카테고리의 다른 글
-