[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
NextJS와 Typescript 사용하여 개발하고 있습니다.
지도는 정상적으로 잘 불러와집니다.
그런데 옵션으로 marker를 추가하면 두가지 에러가 발생합니다.
- kakao.js:37 Uncaught TypeError: a.pc is not a function
- kakao.js:7 Uncaught TypeError: Cannot read properties of undefined
그리고 지도 위에 마우스를 올려서 움직이면 다음과 같은 에러가 반복적으로 발생합니다.
kakao.js:6 Uncaught TypeError: Cannot read properties of undefined (reading ‘call’)
아래는 코드입니다.
‘use client’
import React, {useEffect} from “react”;
declare global {
interface Window {
kakao: any;
}
}
export interface MapProps {
latitude: number;
longitude: number;
}
function Map({latitude, longitude}:MapProps) {
useEffect(()=>{
//can use document here
const mapScript = document.createElement(“script”);
mapScript.async = true;
mapScript.src = //dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_KEY}&autoload=false;
document.head.appendChild(mapScript);
const onLoadKakaoMap = () => {
window.kakao.maps.load(() => {
const mapContainer = document.getElementById(“map”);
const mapOption = {
center: new window.kakao.maps.LatLng(latitude, longitude), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨,
};
//여기서 부터 marker를 위해 추가한 부분
let map = window.kakao.maps.Map(mapContainer, mapOption);
let markerPosition = new window.kakao.maps.LatLng(37.55465450967681, 126.97059787317687)
let marker = new window.kakao.maps.MarKer({
position: markerPosition
})
marker.setMap(map);
});
};
mapScript.addEventListener(“load”, onLoadKakaoMap);
}, [latitude, longitude])
return (<div style={{width:500, height:500}} id=“map”>)
}
export default Map;
코드 중 표시한 부분을 marker사용을 위해 추가하였는데, 에러가 납니다.
저 부분 삭제하면 에러가 나지 않습니다.
어디 부분을 잘못한 것일까요?