[VUE.JS] Vue에 카카오 Maps API 추가해보자(프로젝트 생성 및 지도 출력까지)

네이버 지도 api와 함께 많이 사용하는 카카오 Maps API를 vue-cli에 적용해 보려고 한다.

(Vue에 적용하려는 이유는 특별히 없다. 현재 공부중인 프레임워크라서 일뿐...)

 

카카오 Maps API의 공식문서에는 Vue에 적용하는 방법은 따로 기재되어 있지 않지만 javascript로 적용방법이 잘 적혀 있어 Vue에 맞게 적용하면 된다.

 

1.  준비하기 : 내 애플리케이션 등록 및 카카오 키 발급

카카오 Maps API를 가져오기 위해서는 Javscript API가 필요한데 발급을 받아야 사용할 수 있다. 이 키를 발급받기 위해서는 카카오 계정이 필요하다.

1. 카카오 개발자센터 접속 및 회원가입, 로그인 후 내 애플리케이션 메뉴 클릭
2. 애플리케이션 추가하기 클릭 및 정보입력 후 저장 클릭(정보입력 시 앱 이름과, 사업자 명을 필수 입력해야한다.)
3. 추가한 애플리케이션 클릭
4. 플랫폼 페이지에서 web 플랫폼 버튼을 클릭
5. 사이트 도메인, 기본 도메인 등록 : vue에서 서버를 실행하면 접속할 수 있는 기본 주소인 http://localhost:8080/를 등록해 사용하고자 한다.
6. 선택한 애플리케이션의 요약정보 페이지에서 앱키 중 javascript 키를 가져와 사용

2. 시작하기 : 화면을 보여줄 프로젝트 생성 및 화면 만들기

Vue, Vue-cli 설치 및 프로젝트를 생성해 서버 접속시 나오는 첫 화면에 지도가 나오게 하려고 한다.

1. Vue, Vue-cli 설치 및 프로젝트를 생성 

   // 설치 
   npm install -g vue 
   npm install -g @vue/cli 
   
   // 프로젝트 생성 
   vue create example

2. src/component폴더에 KakaoMap.vue 생성 컴포넌트 이름 지정

   // src/component/KakaoMap.vue
   
   <template>
     <div>
       <h2>카카오 맵 보기</h2>
     </div>
   </template>
   <style scope></style>
   <script>
   export default {
     name: "KakaoMap", // 컴포넌트 이름 지정
     data() {
       return {};
     },
     setup() {},
     created() {},
     mounted() {},
     unmounted() {},
     methods: {},
   };
   </script>

3. app.vue 수정 : 기본 app.vue 화면에서 컴포넌트 이름을 수정했기에 거기에 맞게 수정한다.

   //src/app.vue
   
   <template>
     <KakaoMap />
   </template>
   
   <script>
   import KakaoMap from "./components/KakaoMap.vue";
   
   export default {
     name: "App",
     components: {
       KakaoMap,
     },
   };
   </script>

3. 카카오 지도 api 소스 가져오기

1. 카카오 지도 api 사이트 접속, web 선택해 접속
2. Guide메뉴의 기본예제 소스를 참고해 src/component/KakaoMap.vue에 vue환경에 맞게 추가
   2-1. 지도가 보일 html 요소 및 css 추가

   <template>
     <div>
       <h2>카카오 맵 보기</h2>
       <div id="map"></div>
     </div>
   </template>
   <style scoped>
   #map {
     width: 100%;
     height: 400px;
   }
   </style>

   2-2. data에 map 객체 추가

   data() {
       return {
           map:null
       };
   }

   2-3. Javascript API를 불러온 후 지도 출력하기 : 공식문서에서는 <script src=""> 형태의 삽입방법을 안내한다. Vue에서도 방법이 있긴하지만 특정 페이지(예 : 위치찾기 등)에서 사용하는 API라 해당 페이지에 접속했을 때, 카카오 객체가 있는지 확인해 있으면 바로 지도를 출력하고, 없으면 스크립스 소스를 가져온 후, 지도를 출력하는 방법을 주로 사용했다. 이러한 동작은 dom이 구성된 후 처리해야 하니까 mounted hook에서 처리했다.

   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=네이버 개발자센터에서 발급받은 javascript 키&autoload=false"; // &autoload=false api를 로드한 후 맵을 그리는 함수가 실행되도록 구현
         script.onload = () => window.kakao.maps.load(this.loadMap); // 스크립트 로드가 끝나면 지도를 실행될 준비가 되어 있다면 지도가 실행되도록 구현
   
         document.head.appendChild(script); // html>head 안에 스크립트 소스를 추가
       },
       loadMap() {
         const container = document.getElementById("map"); // 지도를 담을 DOM 영역
         const options = {
           // 지도를 생성할 때 필요한 기본 옵션
           center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
           level: 3, // 지도의 레벨(확대, 축소 정도)
         };
   
         this.map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
       }
   };

   
3. 특정 위치에 마커 찍기 : 지도 로드시 특정 위치에 마커가 함께 출력되도록 하고 싶다면 추가한 함수에 마커의 위치를 지정에 표시할 수 있는 함수를 추가한다.

   loadMap() {
     ...
     this.loadMaker() // 지도가 로드되면서 마커가 생성되도록 함수 추가
   },
   loadMaker() {
     // 마커가 표시 위치
     const markerPosition = new window.kakao.maps.LatLng(33.450701, 126.570667)
   
     // 마커 생성
     const marker = new window.kakao.maps.Marker({
       position: markerPosition
     })
   
     // 마커가 지도 위에 표시되도록 설정
     marker.setMap(this.map)
   }

전체소스

// src/app.vue

<template>
  <KakaoMap />
</template>

<script>
import KakaoMap from "./components/KakaoMap.vue";

export default {
  name: "App",
  components: {
    KakaoMap,
  },
};
</script>

// src/component/KakaoMap.vue

<template>
  <div>
    <h2>카카오 맵 보기</h2>
    <div id="map"></div>
  </div>
</template>
<style scoped>
#map {
  width: 100%;
  height: 400px;
}
</style>
<script>
export default {
  name: "KakaoMap", // 컴포넌트 이름 지정
  data() {
    return {
      // map 객체 설정
      map: null,
    };
  },
  setup() {},
  created() {},
  mounted() {
  	// api 스크립트 소스 불러오기 및 지도 출력
    if (window.kakao && window.kakao.maps) {
      this.loadMap();
    } else {
      this.loadScript();
    }
  },
  unmounted() {},
  methods: {
  	// api 불러오기
    loadScript() {
      const script = document.createElement("script");
      script.src =
        "//dapi.kakao.com/v2/maps/sdk.js?appkey=네이버 개발자센터에서 발급받은 javascript 키&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(33.450701, 126.570667), 
        level: 3
      };

      this.map = new window.kakao.maps.Map(container, options); 
      this.loadMaker();
    },
    // 지정한 위치에 마커 불러오기
    loadMaker() {
      const markerPosition = new window.kakao.maps.LatLng(
        33.450701,
        126.570667
      );

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

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

완성화면

카카오 Maps API의 공식문서 예시에 접속하면 다양한 예시들이 있다. 예시를 보고 필요에 따에 맞게 수정해 사용해보자

참고자료

개발자의 품격 부트캠프 수업자료

카카오 Maps API의 공식문서 : https://apis.map.kakao.com/

nervous-keldysh-87yxg - CodeSandbox

[vue]카카오맵 사용하기