지도 API를 제외한 다른 기능들을 먼저 구현했다. 기본적인 틀은 잡았다고 생각해서, 이제 카카오맵 API를 연결해보려고 했다. 일단 기본적으로 지도를 클라이언트 페이지에 로드하는 것이다.
여기에 들어가서 키를 발급받고, 사이트 도메인도 등록했다.
<!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=발급받은 APP KEY를 넣으시면 됩니다."></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>그리고 이 코드를 입력하고 서버를 띄워서 확인했는데 계속 ReferenceError: kakao is not defined 이 에러가 뜨는 것이다. 그래서 에러코드를 구글링하며 뭐가 문제인지 거의 모든 글을 읽어봤다.
몇 시간 정도 똑같은 글을 읽으니 뭐가 뭔지 정리도 잘 안되는 지경이었다.
대표적인 해결 방법을 정리해봤다.
-
솔루션 1 :
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>이 스크립트 태그를<head>태그 안으로 옮긴다. -
솔루션 2 :
src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."이 코드처럼https://를 추가한다. -
솔루션 3 :
APP KEY자리에 JavaScript 키가 아닌 다른 키가 들어있는지 확인한다. (이걸 실수했다면 필자의 블로그까지 방문하지는 않았을 것이다) -
솔루션 4 :
사이트 도메인을 제대로 추가했는지 확인한다. (이 부분도 놓칠 수 없는 부분이다. 이것까지 체크했는데도 안되기에 여기까지 온 것이라고 생각한다)
필자도 위 4가지를 전부 체크했음에도 계속 같은 에러가 반복되었다. 그런데 정말 멍청하게도 앱 권한 신청을 하지 않아서였다.
필자는 앱 키를 발급하면 자동적으로 모든 권한을 사용할 수 있을 것으로 생각했다. 하지만 따로 신청을 해야하는 것이랍니다.....
감사합니다!