vue3, 카카오맵 api 추가

src/components/Mapkakao.vue

<!-- MapKakao -->
<template>
  <div id="map"></div>
</template>

<script>
export default {
  name:"MapKakao",
  props: {
    latitude: {
      type: Number,
      required: true,
    },
    longitude: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      map: null
    }
  },
  mounted() {
    if (window.kakao && window.kakao.maps) {
      this.loadMap();
    }  else {
      this.loadScript();
    }
  },
  methods:{
    loadScript() {
      const script = document.createElement("script");
      // 해당 앱키의 값은 추후 변경해야할것(현재 테스트용으로 개인키 입력)
      script.src="//dapi.kakao.com/v2/maps/sdk.js?appkey=08c3b314b66d3375fe2951369def0dd3&autoload=false"
      script.onload = () => window.kakao.maps.load(this.loadMap); 

      document.head.appendChild(script);
    },
    loadMap() {
      const container = document.getElementById("map");
      const options = {
        //좌표값 설정
        center: new window.kakao.maps.LatLng(this.latitude, this.longitude),
        level: 4
      };

      this.map = new window.kakao.maps.Map(container, options);
      this.loadMaker();
    },
    loadMaker() {
      const markerPosition = new window.kakao.maps.LatLng(this.latitude, this.longitude);

      const marker = new window.kakao.maps.Marker({
        position:markerPosition
      });

      marker.setMap(this.map);
    }
  }
};
</script>

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

parentPage.vue

<template>
    <MapKakao :latitude="37.39843974939604" :longitude="127.10972941510465" />
</template>

<script>
import MapKakao from '@/components/MapKakao.vue'
export default {
    components:{
        MapKakao
    }
}
</script>

출처: https://soa-memo.tistory.com/41