안녕하세요.
nextjs에서 카카오맵을 어떻게 띄우는지 알아봐요
카카오 지도 API 가이드 그대로하면 안돼요
이유1 : html에서의 로드 방법이기 때문이에요
이유2 : window.kakao.maps.LatLng is not a constructor 오류 나와요.
왜냐! 9번째줄에 kakao.maps.load를 호출하고 있는데요. 이게 스크립트 로드되기 전에 호출되니까 에러뱉어요
그래서 스크립트 로드가 다 되고나서~ kakao.maps.load 함수를 호출하게끔 스크립트 주소 끝에 &autoload=false를 붙여줘야 해요. 그럼 호출 끝~
export default function FFF() {
useEffect(()=>{
const script = document.createElement("script");
script.async = true;
script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=당신의AppKey&autoload=false`;
document.head.appendChild(script);
script.addEventListener("load", ()=>{
window.kakao.maps.load(() => {
const mapContainer = document.getElementById("map");
const mapOption = {
center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 8, // 지도의 확대 레벨
};
new window.kakao.maps.Map(mapContainer, mapOption);
})
});
},[])
return (
<>
<div id="map">
//카카오맵이 들어갈 곳
</div>
</>
)
}
반응형
