Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(1) – Kakao Map API

무슨 API를 선택하지?

지도기반의 SNS를 만들기 위해 지도 API를 사용하려 했는데 Google map API는 유료의 향기가 나서 Kakao map API를 사용하기로 했다.

Kakao Maps API 사용하기

향 후 mobile Application을 제작하게 되도 충분히 활용할 수 있을 것 같은 굉장히 만족스러운 첫인상.Kakao 지도 Javascript API는 키 발급을 받아야 사용할 수 있다.
그리고 키를 발급 받기 위해서는 카카오 계정이 필요하다.

키 발급에는 아래 과정이 필요하다.

      1. 카카오 개발자사이트 접속
      2. 개발자 등록 및 앱 생성
      3. 웹 플랫폼 추가: 앱 선택 – [설정] – [일반] – [플랫폼 추가] – 웹 선택 후 추가
      4. . 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)
      5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.
      6. 앱을 실행합니다.

실제 사용 방법

 

<!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를 사용하는 기초적인 단계는 마무리 지을 수 있다

 

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다