(짧음) window.kakao.maps.latlng is not a constructor

 카카오맵 API를 이용하던 도중, 위와 같은 에러가 발생했다. window.kakao.maps에 LatLng가 없어서 그런 것 같아, console.log를 이용해 확인해보았다.

console.log(window.kakao.maps);

위의 코드 결과

그랬더니 정말로 LatLng가 없었다. 정말로 없어서 동작하지 않았던 것이다. 그런데 분명 처음 카카오맵 api를 이용했을 때는 에러가 발생하지 않았었는데 갑자기 이러니 당황스러웠지만, 어쨌든 이를 해결하기 위해 구글링을 해보았다. 그리고 이에 대한 원인을 찾을 수 있었다.

 script가 완전히 로드되기 전에 map 관련 메소드를 실행하려고 했기 때문에 에러가 발생했던 것아다. 

 이를 해결하기 위해서 kakao에서 제공하는 load라는 메소드를 이용하면 된다고 하여, 다음과 같이 코드를 작성하였다.

// KakaoMap.tsx
import styled from "styled-components";
import React, { useEffect } from "react";
import { checkValidAddress } from "../../utils/functions";

interface IProps {
  width: string;
  height: string;
  address?: string;
  name?: string;
}

const Map = styled.div<IProps>`
  width: ${(props) => props.width};
  height: ${(props) => props.height};
`;

export default function KakaoMap(props: IProps) {
  useEffect(() => {
    window.kakao.maps.load(() => {
      const container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스

      const options = {
        //지도를 생성할 때 필요한 기본 옵션
        center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
        level: 3, //지도의 레벨(확대, 축소 정도)
      };

      const map = new window.kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

      // 주소-좌표 변환 객체를 생성
      const geocoder = new window.kakao.maps.services.Geocoder();

      // 주소로 좌표를 검색
      geocoder.addressSearch(
        props.address,
        function (result: any, status: any) {
          // 정상적으로 검색이 완료되었을 때
          if (status === window.kakao.maps.services.Status.OK) {
            const coords = new window.kakao.maps.LatLng(
              result[0].y,
              result[0].x
            );

            // 결과값으로 받은 위치를 마커로 표시
            const marker = new window.kakao.maps.Marker({
              map,
              position: coords,
            });

            // 운포윈도우로 장소에 대한 설명 표시
            const infowindow = new window.kakao.maps.InfoWindow({
              content: `<div style="width:150px;text-align:center;padding:6px 0;">${props.name}</div>`,
            });
            infowindow.open(map, marker);

            // 지도와 중심을 결과값으로 받은 위치로 이동
            map.setCenter(coords);
          } else if (status === null) {
            // 정상적으로 주소강 입력되지 않았을 때
            alert("주소가 잘못 입력되었습니다!");
          }
        }
      );
    });
  }, []);

  return <Map id="map" width={props.width} height={props.height}></Map>;
}

 kakao.map.load 속에 카카오맵을 불러오는 코드들을 넣었더니 제대로 동작하였다. 여담이지만, 며칠 전에도 이 방법을 똑같이 적용했었는데도 에러가 계속 발생했었다. 그리고 오늘 다시 이 방법을 적용했는데 오늘은 해결이 되었다. 도대체 뭐가 달라졌던 걸까.

---

참고한 글

https://marklee1117.tistory.com/83

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

https://devtalk.kakao.com/t/typeerror-kakao-maps-latlng-is-not-a-constructor/113413

카카오지도 맵TypeError: kakao.maps.LatLng is not a constructor 에러