[Vue] Vue3에서 Kakao Map 사용하기

Vue에서 지도를 띄우기 위해 카카오맵 API를 사용하려고 한다.

 

카카오맵 API Key는 여기에서 받으면 되고, JavaScript 키를 사용하면 된다.

플랫폼 등록하는 것도 잊지 말자! 포트 번호가 바뀌었을 때 바보 같이 도메인 등록하는 걸 까먹었다가 삽질했다...

 

아래는 카카오맵에서 제공하는 기본 지도 생성 예제를 활용해서 Vue에서 지도를 띄우는 코드이다.

 

📄 코드

<script setup>
import { ref, onMounted } from 'vue'
const { VITE_KAKAO_MAP_KEY } = import.meta.env

const mapContainer = ref(null)

onMounted(() => {
  loadKakaoMap(mapContainer.value)
})

const loadKakaoMap = (container) => {
  const script = document.createElement('script')
  script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${VITE_KAKAO_MAP_KEY}&autoload=false`
  document.head.appendChild(script)

  script.onload = () => {
    window.kakao.maps.load(() => {
      const options = {
        center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도 중심 좌표
        level: 3, // 지도 확대 레벨
        maxLevel: 5, // 지도 축소 제한 레벨
      }

      const mapInstance = new window.kakao.maps.Map(container, options) // 지도 생성
    })
  }
}
</script>

<template>
  <div ref="mapContainer" style="width: 100%; height: 70vh"></div>
</template>

<style scoped>
</style>

 

 

options는 카카오맵 Docs에서 확인하고 필요한 대로 조정하면 된다.

 

🧩 결과