[ 카카오맵 API ] vue3에서 kakaomap 사용하기

 

카카오 개발자 애플리케이션 등록

Kakao Developers

 

난 지난번에 해 놓은 게 있어서 사이트 도메인 주소만 바꿔줬다. 

 

 

[ API ] 카카오 오픈 API 사용하기 / Postman 통한 요청 확인

 

 

 

중요한 건 앱 키

이 중에서도 Javascript 키를 사용할 것이다.

 

 

또 한 가지 중요한 것은 카카오맵 활성화 설정을 해줘야 한다.

이거 안 해주면 영원히 에러 겪음…

 

 

 

 

---

카카오맵 API

https://apis.map.kakao.com/

 

 

1. env 파일에 Javascript key 등록

.env 파일에 Javascript key를 등록한다.

내 프로젝트는 vite 환경이기 때문에 key 이름에 접두사로 VITE_를 꼭 붙여줘야 키 값을 인식한다.

(vue cli의 경우 VUE_APP_)

 

🔑 env 파일의 키 값 사용하기

vite 환경에서는 import.meta를 사용한다.

const { VITE_KAKAO_API_KEY } = import.meta.env

 

 

2. 지도 그릴 영역 만들기

<div id="map" ref="mapContainer" style="width: 100%; height: 500px"></div>

const mapContainer = ref(null)

 

 

3. 실제 지도 그리는 Javascript API를 불러오기

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

script 태그를 직접 삽입하지 않고 자바스크립트로 삽입하는 방법을 택했다.

이때 //이라는 상대 프로토콜을 사용하면, 사용자의 http, https 환경에 따라 자동으로 해당 프로토콜을 따라간다.

해당 script 태그는 어떤 위치에 넣어도 상관없지만, 반드시 실행 코드보다 먼저 선언되어야 하기 때문에 head 부분에 넣어줬다.

 

 

4. 지도 띄우는 코드 작성

script.onload = () => {
  window.kakao.maps.load(() => {
	  //지도를 생성할 때 필요한 기본 옵션
    const options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    }
		//지도 생성 및 객체 리턴
    const mapInstance = new window.kakao.maps.Map(mapContainer.value, options)
  })
}

 

만약 타입스크립트를 사용하는 중에 window.kakao에서 타입 에러가 난다면… (아래 글 참고)

[ 카카오맵 API ] Property 'kakao' does not exist on type 'Window & typeof globalThis'.

 

Map 객체의 첫 번째 파라미터는 지도를 그릴 영역의 DOM 레퍼런스, 두 번째 파라미터는 options가 들어간다.

options에는 커스텀하려는 내용을 채워넣으면 된다. 그러나 center는 필수 값.

 

 

---

최종 코드

단지 지도만 로드했을 때

<template>
  <div id="map" ref="mapContainer" style="width: 100%; height: 500px"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const { VITE_KAKAO_API_KEY } = import.meta.env

const mapContainer = ref(null)

const loadMap = () => {
  const script = document.createElement('script')
  script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${VITE_KAKAO_API_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,
      }

      const mapInstance = new window.kakao.maps.Map(mapContainer.value, options)
    })
  }
}

onMounted(() => {
  loadMap()
})
</script>

 

Hi kakao~