nextjs
카카오 지도 api 활용
순9
2024. 7. 29. 17:33
728x90
기존 리액트에서 사용 했던 코드에서 많은 변화는 없지만
지도의 에러가 계속 나서 애먹음
리액트에서 사용 했던 코드 그대로 가져왔다
에러
1. Cannot read properties of undefined (reading ‘Geocoder’)
- window.kakao.maps.services.Geocoder에서 정의되어 있어야 하는데,
window.kakao 객체나 그 하위 객체인 maps 또는 services가 아직 로드되지 않은 상태라서 에러가 난듯 하다
2. Cannot read properties of undefined (reading 'maps')
- kakao Maps SDK 스크립트가 완전히 로드되지 않은 상태에서 kakao 객체에 접근하려고 시도해서 에러 난듯..
결론은 로드가 되지 않았는데 접근을 하려고 해서 에러가 계속 났다
작성 한 코드
layout.ts에 스크립트 적용
import Script from 'next/script';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={GeistSans.className}>
<body className="bg-background text-foreground">
<Script
src="https://dapi.kakao.com/v2/maps/sdk.js?appkey='내 키'&libraries=services,clusterer"
strategy="afterInteractive" />
</body>
</html>
);
}
최상단에 적용 한 후 지도 를 사용 하는 컴포넌트에 Geocoder를 불러 왔으나 에러가 남
해결이 안되어 다른 방법을 찾음
동적으로 스크립트를 로드하려면 스크립트 파라미터에 autoload=false 옵션을 사용하라고 하여
layout에 있는 스크립트 제거
- 지도 사용 하는 컴포넌트에 스크립트 추가
- 카카오 객체가 로드 되면 실행 된다면 조건을 걸어 지도 실행
- 정상적으로 콘솔에 주소 찍힘
useEffect(() => {
if (typeof window !== 'undefined') {
const script = document.createElement('script');
script.src = 'http://dapi.kakao.com/v2/maps/sdk.js?appkey=''&libraries=services&autoload=false';
const { kakao } = window;
console.log(kakao)
script.onload = () => {
if (window.kakao && window.kakao.maps) {
window.kakao.maps.load(function() {
const geocoder = new window.kakao.maps.services.Geocoder();
const coord = new window.kakao.maps.LatLng(latitude, longitude);
geocoder.coord2Address(coord.getLng(), coord.getLat(), (result: ResultItem[], status: string) => {
if (status === window.kakao.maps.services.Status.OK) {
const adr = result[0].address.region_2depth_name;
setAddr(adr);
console.log("Address:", adr);
} else {
console.log("Geocoding failed:", status);
}
});
});
} else {
console.error("Kakao Maps API failed to load.");
}
};
document.head.appendChild(script);
}
}, [latitude, longitude]);
왜 글로 쓰면 내용이 조금일까🌋