kakao API 연동하기

kakao map API

1. 카카오 지도 API 웹 공식사이트에 들어간다.
   https://apis.map.kakao.com/
   그러면 상단에 보이는 "APP KEY 발급"을 클릭하고 로그인을 한다.

2. 애플리케이션 추가하기를 클릭 후

• 앱 이름
• 사업자명
  등록해주면 된다. 나중에 수정도 가능하다. 그러니 등록을 하자!
  등록한 애플리케이션으로 들어가면 APP KEY가 발급되어있다.

3. 플랫폼 설정
   우리는 web에서 지도 api를 사용하니 Web 플랫폼 등록을 해주자!

• 사이트 도메인에 사용 도메인 주소를 등록해주자.

  필자는 로컬환경에서 테스트 중이니 http://127.0.0.1:500
  으로 등록해주었다.

4. https://apis.map.kakao.com/ 사이트로 들어가서
   메인 페이지에서의 web버튼을 클릭해준다. "시작하기"버튼을 눌러 들어가면 a,b,c를 진행해준다.

a. 지도를 담을 영역 만들기 -> html 영역에 추가

<div id="map" style="width:500px;height:400px;"></div>

b. 실제 지도를 그리는 javascript API 불러오기 -> body코드안에 추가

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

appKey="" 애플리케이션에서 등록 후 받은 "Javascript KEY"를 넣어주면 된다.

c. 지도를 띄우는 코드 작성 -> js 파일에 추가하고 html태그랑 연결

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); //지도 생성 및 객체 리턴

result

 <div id="map" style="width:500px;height:400px;"></div>
    </main>
    <script 
        type="text/javascript" 
        src="//dapi.kakao.com/v2/maps/sdk.js?appkey=77944f74d93160a5473611afeb0b1877">
    </script>
    <script src="script.js"></script>

등록해주고 script파일또한 연결해주었다.
API가 띄어진것을 확인할 수 있다.