자꾸 아래와 같은 오류가 뜹니다. 왜 그런지 아시나요?
vscode로 실행중이구요
index.html:40 Uncaught TypeError: Cannot read properties of undefined (reading ‘maps’)
at mounted (index.html:40:42)
개발자 플랫폼 창에서 웹 사이트도메인은 아래와 같이 등록 했습니다.
http://localhost:5500
https://localhost:5500
http://127.0.0.1:5500
https://127.0.0.1:5500
html 전체 코드는 다음과 같습니다.
API 코드는 “#” 처리 함
여기를 클릭하면 주소가 표시됩니다.
<script>
function mounted() {
/* global kakao */
const mapContainer = document.getElementById('map');
const mapOption = {
center: new window.kakao.maps.LatLng(37.5666805, 126.9784147),
level: 3,
disableDoubleClickZoom: true
};
// 지도 생성
const map = new window.kakao.maps.Map(mapContainer, mapOption);
//인포윈도우 표시 위치
const iwPosition = new window.kakao.maps.LatLng(37.5666805, 126.9784147);
// 주소-좌표 변환 객체를 생성
const geocoder = new window.kakao.maps.services.Geocoder();
// 지도를 클릭했을 때 클릭 위치 좌표에 대한 주소정보를 표시하도록 이벤트를 등록
window.kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
const latlng = mouseEvent.latLng;
// 좌표로 주소 정보를 요청
geocoder.coord2Address(latlng.getLng(), latlng.getLat(), function(result, status) {
if (status === window.kakao.maps.services.Status.OK) {
const detailAddr = result[0].address;
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<div>🏠 도로명주소: ${detailAddr.road_address ? detailAddr.road_address.address_name : '없음'}</div>
<div>📍 지번주소: ${detailAddr.address.address_name}</div>
`;
}
});
});
}
window.onload = mounted;
</script>
""""