[kakaoMapAPI] 마주한 오류

 카카오 api를 사용하는 방법은 script태그를 layout.js 파일에  추가하면 전역객체인 window에 등록이 된다.그래서  kakao라는 변수를 별도로 지정해주지 않아도 window내에 있기 때문에 호출이 가능한 것!

그래서 막 난 kakao를 쓰지 않았는데.. let kakao = any; 뭐 이런 식으로 삽질을 안해도 된다는 말씀!

 

그렇게 일단 스크립트를 추가했고 코드를 작성하는 중에 발견한 오류를 정리해봤다!

 

1. TypeError: kakao.maps.LatLng is not a constructor? 

TypeError: kakao.maps.LatLng is not a constructor

 

코드를 실행하는 중에 이런 오류를 발견!

 kakao.maps.LatLng가 생성자 함수가 아니다.라는 뜻이다.. 보니까 

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

 

이 코드 부분에서 LatLng이라는 메서드는 아직 로딩이 끝나지 않아서 존재하지 않는데,  생성자 함수 (constructor)로 사용하려고 하기 때문에 발생하는 것이었다!

new kakao.maps.LatLng을 그러면 로딩이 끝난 후에 호출이 되도록 하면 되지 않겄냐?

즉, 로딩 완료 후에 options 객체에 접근하도록 하면 되는데, 이때 API 문서를 보니 

load라는 함수를 사용하면 되는 것 같다!

그래서 script에 추가하면 해결!

 src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=apikey&libraries=services&autoload=false"