문의 시, 사용하시는 SDK 버전 정보와 디벨로퍼스 앱ID를 알려주세요.
[문제가 된 링크]
https://sajutoktok.com/version-test/testmaps
[오류 메시지]
Bug in custom html:
ReferenceError: kakao is not defined
[조치]
아래의 링크에서 볼 수 있는 ‘Javascript + HTML’ 코드를 그대로 사용하고,
JavaScript 키를 넣고,
Web 사이트 도메인에 아래 4개를 등록 완료했으나 여전히 오류 메시지가 떠서 다른 원인이 있을지 문의드립니다.
https://sajutoktok.com
https://www.sajutoktok.com
http://sajutoktok.com
http://www.sajutoktok.com
[사용하는 툴]
bubble 이라는 노코드 웹 빌더를 사용 중입니다.
kakao is not defined
스크립트가 kakao라는 객체에 접근 못하는 것으로 보통 카카오 sdk import를 잘못하여 발생하는 것입니다.
작성하신 관련 코드 블럭 기재해주시면 추가로 확인해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>클릭한 위치에 마커 표시하기</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={이곳에 실제로는 Javascript 키를 넣습니다}&libraries=services&autoload=false"></script>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<p><em>지도를 클릭해주세요!</em></p>
<div id="clickLatlng"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 지도를 클릭한 위치에 표출할 마커입니다
var marker = new kakao.maps.Marker({
// 지도 중심좌표에 마커를 생성합니다
position: map.getCenter()
});
// 지도에 마커를 표시합니다
marker.setMap(map);
// 지도에 클릭 이벤트를 등록합니다
// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
// 클릭한 위도, 경도 정보를 가져옵니다
var latlng = mouseEvent.latLng;
// 마커 위치를 클릭한 위치로 옮깁니다
marker.setPosition(latlng);
var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
message += '경도는 ' + latlng.getLng() + ' 입니다';
var resultDiv = document.getElementById('clickLatlng');
resultDiv.innerHTML = message;
});
</script>
</body>
</html>
dapi.kakao.com는 https로만 서빙 하기때문에
src="//dapi.kakao.com 이렇게 사용하면 안되고 src="https//dapi.kakao.com 이렇게 명시적으로 프로토콜 설정해보시겠어요?
확인 감사합니다.
아래는 https:// 프로토콜 설정을 했을 때 오류 메시지입니다.
Can’t find variable: kakao
알려주신 문제가 된 링크 확인 해보니
(1) 여전히 https 프로토콜이 적용 안되어있습니다.
(2) 개발자 콘솔에서 kakao 접근이 잘되는 걸 볼때, 개발하신 스크립트가 호출하는 시점에 로드 안된 것으로 보여
스크립트 import를 잘못하신 것으로 추정됩니다.
(3) 카카오 지도 SDK를 헤더가 아닌 body 본문에 기재하신 것으로 보입니다. html head에 설정하셔서 호출전 로딩이 완료되도록 처리해주세요.
알려주신 문제 있는 주소에는 여전히 반영 안된 것으로 나오며 에러 발생하네요.
수정하신 곳과 표시되는 것이 다른 것 같습니다.
확인 부탁드려요.
이런식으로 사용해보시겠어요?
(1) head에 import 하시고
(2) body에 div “map” 객체 두고
(3) div “map” 객체 아래 맵로딩 스크립트 두고
<html>
<head>
<script
type="text/javascript"
src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=앱키"
></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<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>
성공했습니다ㅠㅠ 도움 주셔서 정말 감사드립니다.
(1), (2), (3)의 위치와 순서에 따른 차이는 어느 정도 이해가 되는데, (1)이 꼭 body가 아닌 head에 있어야 하는 이유가 아직 명확하게 이해되지는 않습니다.
"body에 SDK가 위치하면, 호출전 로딩이 완료되지 않을 수 있다"고 설명할 수 있을 것 같은데 맞을까요?
body에 있어도 상관은 없지만,
(1) 코드 가독성과 (2) 라이브러리간 충돌 시 디버깅하기도 비교적 용이 하구요. (3) html 로드 중간에 스크립트 에러가 발생하면 하위 스크립트가 실행안되어 예측 가능한 에러 핸들링이 안될 수도 있어서
sdk와 같은 스크립트 라이브러리는 head에 두어 body 로딩전에 미리 로드되도록 하는 것이 표준적인 방법이라 볼 수 있을 것 같아요.
설명 감사드립니다.
관련 내용 숙지하여 잘 활용해보도록 하겠습니다!
