TypeError: kakao.maps.LatLng is not a constructor

카카오 지도 API를 처음 사용해본다면 이런 에러를 볼 수도 있을 것이다.

 

우리가 카카오 api를 쓸 수 있는 과정을 쉽게 설명해보면,

일단 스크립트를 추가하게 되면 kakao라는 객체가 window(전역 객체)에 등록이 되기 때문에

그 안(maps)에 지도를 그려주는 메서드들을 호출해서 사용할 수 있는 것이다.

 

kakao.maps.LatLng is not a constructor라는 에러가 발생하는 이유는 LatLng이라는 메서드는 아직 로딩이 끝나지 않아서 존재하지 않는데  생성자 함수 (constructor)로 사용하려고 하기 때문에 발생하는 오류다. 

 

kakao 맵 공식문서에서는 아래와 같은 방법으로 지도를 그리도록 안내하고 있다

 

const container = document.getElementById("map");
  12 | const options = {
> 13 |   center: new kakao.maps.LatLng(33.450701, 126.570667),
     |          ^
  14 |   level: 3,
  15 | };
  16 | const map = new kakao.maps.Map(container, options);

 

여기서 가장 먼저 new kakao.maps.LatLng이 먼저 실행되기 때문에 에러가 발생한 것뿐이고 만약 new kakao.maps.Map가 먼저 실행이 되었다면 똑같이 kakao.maps.Map is not a constructor라는 오류가 나왔을 거다.

 

그럼 당연히 해결 방법은 스크립트 로딩이 끝났을 때 객체에 접근하도록 하면 된다.

그러려면 kakao.maps의 정적 메서드인 load를 사용해주면 된다.

 

load 

v3 스크립트를 동적으로 로드하기 위해 사용한다.
스크립트의 로딩이 끝나기 전에 v3의 객체에 접근하려고 하면 에러가 발생하기 때문에
로딩이 끝나는 시점에 콜백을 통해 객체에 접근할 수 있도록 해 준다.
비동기 통신으로 페이지에 v3를 동적으로 삽입할 경우에 주로 사용된다.
v3 로딩 스크립트 주소에 파라미터로 autoload=false를 지정해 주어야 한다.

 

https://apis.map.kakao.com/web/documentation/#load_load

 

문서에  load 메서드를 사용하려면 스크립트 태그 마지막에 &autload=false를 붙여주면 된다.

 

<script type="text/javascript" defer src={`//dapi.kakao.com/v2/maps/sdk.js?appkey='apiKey'&autoload=false`}/>

 

그 후에 React를 사용한다면 useEffect로 지도 로직이 필요한 부분에 불러오던지 하면 정상적으로 지도가 나온다.

    kakao.maps.load(() => {
      const container = document.getElementById('map');
      const options = {
        center: new kakao.maps.LatLng(33.450701, 126.570667),
        level: 3,
      };
      const map = new kakao.maps.Map(container, options);
      });