[카카오맵 api 에러] kakao is not defined

참고

https://devtalk.kakao.com/t/vue-kakao-map-api/96660

 

에러

index.html에 카카오에서 제공하는 샘플코드를 넣으면 문제없이 작동하는데

다른 Vue 파일에서 가져와서 쓰려고 할 때 자꾸 위와 같은 에러가 났다. 

 

원인

Vue는 react와 마찬가지로 기본적인 SPA방식의 프레임워크이기 때문에,

전역에서 접근할 수 있도록 루트 html에 window.Kakao로 init 한다고 한다.

그래서 html이 아닌 다른 파일에서 불러올 경우에 에러를 뱉는듯하다.

 

해결

카카오개발자 분께서 제공해주신 아래 소스코드를 적용하니까 에러가 해결됐다.

<template>
  <div id="app">
    <div id="map"></div>
  </div>
</template>

<script>
export default {
    mounted() {
        if (window.kakao && window.kakao.maps) {
            this.initMap();
        } else {
            const script = document.createElement('script');
            /* global kakao */
            script.onload = () => kakao.maps.load(this.initMap);
            script.src = 'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=YOUR_APPKEY';
            document.head.appendChild(script);
        }
    },
    methods: {
        initMap() {
            var container = document.getElementById('map');
            var options = {
              center: new kakao.maps.LatLng(33.450701, 126.570667),
              level: 3
            };

            var map = new kakao.maps.Map(container, options);
            map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
        }
    }
}
</script>

<style>
#map {
    width: 400px;
    height: 300px;
}
</style>

이제 더 이상 에러를 뱉지 않는다!!😉