카카오맵 API - 사용 방법[웹]

카카오맵 API는 1일 30만회 사용이 가능합니다.

 

카카오맵 API를 사용하기 위해서 우선 API키를 받아야 합니다.

URL : https://developers.kakao.com/

 

사이트의 하단에 들어가서 

개발자 등록 후

앱 개발 시작하기 버튼을 클릭하여 정보를 입력한 뒤 키를 받으면 됩니다.

발급받은 키는 내 애플리케이션 -> 설정 -> 일반에서 확인이 가능합니다.

그 다음 설정 -> 일반 에 보시면 플랫폼이 있습니다.

플랫폼에서 플랫폼 추가를 해주셔야 서비스를 이용할 수 있습니다.

저는 로컬에서 테스트하기 때문에 localhost와 포트번호 8080을 입력해 주었는데,

웹 도메인이 있으시다면 도메인 주소를 입력해 주시면 됩니다.

 

이제 준비는 끝났으니 웹에서 지도를 뿌려줄 영역과 스크립트를 추가해 주면 됩니다.

 

HTML

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

Script

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=제공받은 자바스크립트 KEY"></script>
<script>
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); //지도 생성 및 객체 리턴

</script>

 

이렇게 해주시고 페이지를 보시면 정상적으로 지도가 나오는 것을 확인할 수 있습니다.

 

 

이 예제는 카카오 AP I페이지에서도 확인할 수 있으며, 마커 생성, 클릭 이벤트 등 다양한 사용 방법이 나와있습니다.

URL : http://apis.map.kakao.com/web/sample/

불러오는 중입니다...