어제 까지는 같은 코드로 지도가 잘 불러졌는데 오늘 다시 로컬 환경에서 실행해보니 흰 화면만 뜨고 몇초 뒤에 콘솔에
GET http://t1.daumcdn.net/mapjsapi/js/main/4.4.7/kakao.js net::ERR_INTERNET_DISCONNECTED
에러가 뜹니다. 네트워크를 열어보면 kakao sdk 는 불러지지만 daum CDN 에서 kakao.js 를 불러오지 못하고 있는듯 합니다.
어떻게 해결해야 할까요?
import { useEffect, useState } from "react";
import styled from "styled-components";
interface Coords {
x: number;
y: number;
}
const KakaoMap = () => {
const [coords, setCoords] = useState<Coords>();
useEffect(() => {
const mapScript = document.createElement("script");
mapScript.async = true;
mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY}&libraries=services&autoload=false`;
document.head.appendChild(mapScript);
const onLoadKakaoMap = () => {
window.kakao.maps.load(() => {
// 지도 생성
const mapContainer = document.getElementById("map"), // 지도를 표시할 div
mapOption = {
center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
};
const map = new window.kakao.maps.Map(mapContainer, mapOption);
const markerPosition = new window.kakao.maps.LatLng(33.450701, 126.570667);
// 결과값을 마커로 표시
const marker = new window.kakao.maps.Marker({
map: map,
position: markerPosition,
});
const { La, Ma } = map.getCenter();
setCoords({ x: La, y: Ma });
// 지도의 중심을 결과값으로 받은 위치로 이동
marker.setMap(map);
window.kakao.maps.event.addListener(map, "dragend", () => {
const { La, Ma } = map.getCenter();
const geocodeService = new window.kakao.maps.services.Geocoder();
const callback = function (result: any, status: any) {
console.log("result is: ", result);
if (status === window.kakao.maps.services.Status.OK) {
console.log("그런 너를 마주칠까 " + result[0].address.address_name + "을 못가");
}
};
setCoords({ x: La, y: Ma });
geocodeService.coord2Address(La, Ma, callback);
});
});
};
mapScript.addEventListener("load", onLoadKakaoMap);
return () => mapScript.removeEventListener("load", onLoadKakaoMap);
}, [coords, coords?.x, coords?.y]);
return <Map id="map" />;
};
const Map = styled.div`
height: 400px;
width: calc(100% - 2px);
border-radius: 4px 4px 0 0;
`;
export default KakaoMap;