[Solved] kakao.maps.LatLng is not a constructor

카카오 지도를 띄우려고 하다보면, 위와 같은 에러메시지를 만날 수 있다. 
어떻게 해결 할 수 있는지 알아보자.

 

이전에, 내가 어떻게 지도를 띄우는지 정리한 글을 포스팅 한적이 있다. 
그 방식대로 완전히 따라 했다면, 위와 같은 에러가 생기지 않았겠지만, 여기서는 어떻게 해결하는지 알아보자.

---

원인

원인은 script가 완전히 로드 되기 전에 map 관련 메소드를 실행 시키려고 하기 때문에 생기는 에러이다. 

kakao에서 제공하는 api script는 sdk.js가 모두 로드 된 이후, kakao.js라는 파일을 로드하게 되는데, kakao.js가 완전히 로드 되기 전에 kakao.js 안에 있는 함수를 호출하려고 하여 생기는 문제이다.

 

---

해결책

방법은 매우 간단하다. kakao에서 제공하는 load라는 메소드를 아래와 같은 방식으로 사용하면 된다.

  useEffect(() => {
    const mapScript = document.createElement('script');

    mapScript.async = true;
    mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_API_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(33.450701, 126.570667), // 지도의 중심좌표
          level: 3, // 지도의 확대 레벨
        };
        new window.kakao.maps.Map(mapContainer, mapOption);
      });
    };
    mapScript.addEventListener('load', onLoadKakaoMap);
  }, []);