[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
이전에 공부하면서 한번씩 사용해봤었는데, 자신있게 도메인 등록까지 빠밤 했는데 도대체 왜 오류가 나는지 이해가 가지 않아요.
autoload=false로 해두면 될거라고 어디서 스쳐지나가면서 봐서 했는데 여전히 같은 오류가 뜨네요
혹시 몰라 지도부분의 코드부분을 첨부합니다.
import Script from 'next/script';
const NEXT_PUBLIC_KAKAO_API_KEY = process.env.NEXT_PUBLIC_KAKAO_MAP_API_KEY;
export default function CompanyMap({ officeLatLng }) {
const { lat, lng } = officeLatLng;
const [level, setLeve] = useState(4);
const containerRef = useRef();
const initMap = useCallback(() => {
if (containerRef.current) {
const map = new kakao.maps.Map(containerRef.current, {
center: new kakao.maps.LatLng(lat, lng),
level: level,
});
const markerPosition = new window.kakao.maps.LatLng(lat, lng);
const marker = new window.kakao.maps.Marker({
position: markerPosition,
});
marker.setMap(map);
}
}, []);
useEffect(() => {
if (window?.kakao) {
initMap();
}
}, [initMap]);
return (
<>
<Script
src={`https://dapi.kakao.com/v2/maps/sdk.js?appkey=${NEXT_PUBLIC_KAKAO_API_KEY}&autoload=false`}
onLoad={() => kakao.maps.load(initMap)}
/>
<div id="map" ref={containerRef} className="w-full h-64" />
</>
);
}