Notice
Recent Posts
Recent Comments
관리 메뉴

Developer Gonie

1. 카카오 Map API, Key 발급부터 실행까지(Kakao 지도 API) 본문

개인 공부/카카오 Map API

1. 카카오 Map API, Key 발급부터 실행까지(Kakao 지도 API)

이대곤 2022. 9. 5. 17:40

"kakao is not defined" 에러 발생시 해결방법을 찾고 계시다면 이 링크를 클릭해주세요

1. API 사용을 위한 Key 발급받기

- https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

2. API를 호출하는 곳의 도메인 등록하기

* 중요! 이 과정을 생략하면 "kakao is not defined" 에러가 발생한다.(에러문은 크롬 콘솔창에서 확인)

3. 카카오 지도 API 간단 실행 예시코드

* 발급받은 Key 중에 Javascript용 key 값을 아래서 appkey의 값으로 넣어주고 실행하면 됨

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Kakao 지도 시작하기</title>
</head>
<body>
	<div id="map" style="width:500px;height:400px;"></div>
	
	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=여기에 발급받은 javascript 인증키를 입력해주세요"></script>
	<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>
</body>
</html>

실행결과

Comments