안녕하세요 최근에 카카오맵 API를 활용하게된 개발자 지망생입니다.
다름이 아니라 제가 다음과 같이 JavaScript에서 API활용 코드를 작성했는데, 아래와 같은 에러 메시지가 뜹니다.
저희는 일단 Kakao Maps API를 활용해 주변에 가까운 공용주차장이 어디에 있는지에 대한 좌표, 주소를 출력하는 웹 어플리케이션을 구현 중입니다. 검색창에서 본인이 검색을 원하는 지역을 검색하면, 가까운 공중화장실의 결과가 리스트 형태로 나오게끔 하는게 목적입니다.
저의 프로그램을 돌리자마자 콘솔에 아래와 같은 에러가 뜹니다.
당연히 돌리는대로 위 에러가 발생하니 검색 기능을 수행할 수 없고 여기서 더 나아갈 수가 없었습니다.
Failed to load resource: the server responded with a status of 401 ()
Uncaught ReferenceError: kakao is not defined
at (index):61:25
(anonymous) @ (index):61
위 문제가 되는 부분의 코드를 공유하겠습니다.
<script type="text/javascript"
src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=여기에는제JavaScript API 키를 입력합니다.">
{% if x_values %}
</script>
let xCenter = '{{x_values[0] | safe}}'
let yCenter = '{{y_values[0] | safe}}'
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(yCenter, xCenter),
level: 3
};
...
</script>
결국 401에러가나서 API에 대한 접근 권한이 없는 것으로 판단하고 아래 kakao.maps API를 활용할 수 없게 된 것입니다. 제가 발급 받은 키를 입력했고 활용 플랫폼은 웹입니다. 제가 등록한 URL은 https://localhost:5000입니다.
아무리 찾아보고 도움을 받아도 도대체 어디가 잘 못된 것인지 이해가 잘 안되어서 제가 추가적으로 어떤 걸 확인할 수 있을지 아시는 분들의 도움을 받고자 이렇게 게시판에 질문을 남기게 되었습니다.
만약 위 정보로도 부족하다면 제 코드 전체를 공유드리도록 하겠습니다.
감사합니다.
[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.