[카카오 맵 API] kakao is not defined 에러 해결

카카오 맵 API를 사용하다보면 가장 자주 나오는 에러인 것 같습니다

'kakao is not defined'에러는 script를 통해 카카오맵 api에 필요한 정보를 로드하기 전에 

kakao.maps.~와 같은 코드들이 사용되어 발생하는 에러입니다. 

하단 코드 참고하여 수정하면 에러 해결이 가능합니다. 

 

//App.vue

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  const script = document.createElement('script');
  const key = import.meta.env.VITE_KAKAO_APP_KEY;
  const src = '//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=' + key;
  script.setAttribute('src', src);
  document.head.appendChild(script);

  script.onload = () => {
    kakao.maps.load(() => {
      const container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
      const options = {
        //지도를 생성할 때 필요한 기본 옵션
        center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
        level: 3, //지도의 레벨(확대, 축소 정도)
      };

      const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
      // 마커가 표시될 위치입니다
      var markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);

      // 마커를 생성합니다
      var marker = new kakao.maps.Marker({
        position: markerPosition,
      });

      // 마커가 지도 위에 표시되도록 설정합니다
      marker.setMap(map);
    });
  };
});
</script>

<template>
  <div id="map" style="width: 500px; height: 400px"></div>
</template>

<style></style>

 

이런 에러 없이 간단하게 카카오 지도를 사용하고 싶다면 아래의 글을 확인하시면 좋을 듯합니다. 

 

https://yangsosolife.tistory.com/98/

[vue 3] 카카오맵 API 사용하기(1분 만에 지도 띄우기)