[Nuxt.js] Nuxt.js에서 KakaoMap API 사용하기 💻 🗺

Nuxt.js 에서 KakaoMap API를 사용하는 데 어려움을 겪고 있는 분들을 위해,,
또 똑같은 실수를 반복하게 될지도 모를 미래의 나를 위해 정리해 보는 글입니다. 📝
혹시 잘못된 부분이 있다면 알려주세요!

 

Nuxt.js란?

Vue Application을 위한 강력한 프레임워크! 조금 더 손쉽게 Vue application을 제작할 수 있습니다. 

🔗  Nuxt.js 공식 페이지

The Intuitive Vue Framework

 

---

Nuxt.js App 에서 KakaoMap API 사용하기

 

🔑  카카오맵 JavaScript API를 위한 키 발급 받기

1. https://developers.kakao.com/ 에 접속하여, 상단의 "내 애플리케이션"을 클릭합니다.

 

2. "애플리케이션 추가하기"를 클릭합니다.

 

3. 앱 이름 및 사업자명을 입력한 후, 저장을 누르면 애플리케이션이 추가됩니다.

 

4. 추가된 애플리케이션을 클릭하면, 아래와 같이 앱 키를 확인하실 수 있습니다.
키 목록 중, JavaScript 키를 복사하여 준비해 주세요.

5. 아래 플랫폼 설정하기를 클릭하면, Android, iOS, Web 세가지 종류로 플랫폼을 설정할 수 있습니다.
여기서는 Web을 사용할 예정이기 때문에, Web 플랫폼 설정을 클릭해 줍니다.

6. 저는 우선 로컬호스트에서 테스트할 예정이므로, 아래와 같이 로컬호스트를 등록해주었습니다.

 

💻  Nuxt.js 에서 KakaoMap 지도 띄우기

* 저는 코드 에디터로 Visual Studio Code를 사용합니다.

1. nuxt.config.js 설정

head 부분에 아래와 같이 코드를 추가해 줍니다.
appkey 부분에 위에서 발급받은 키를 복사하여 넣어줍니다.

💡 autoload=false 꼭 넣어주세요!

//nuxt.config.js

head: {
	script:[{
    		src: "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=발급받은 APP KEY를 넣으시면 됩니다."
    	}],
}

 

2. 지도를 담을 영역 만들기

지도가 들어갈 page 혹은 component를 열어준 후, template 코드를 아래와 같이 작성합니다.
"map"이라는 id를 가진 div를 만들어 주었습니다. 이 div 의 사이즈는 500x400px입니다.

//index.js

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

 

3. script 코드는 아래와 같이 작성합니다.

//index.js

<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    kakao.maps.load(this.initMap);
  },
  methods: {
    initMap() {
      const container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
      const options = {
        //지도를 생성할 때 필요한 기본 옵션
        center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
        level: 5, //지도의 레벨(확대, 축소 정도)
      };
      var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
      this.map = map;
    },
  },
};
</script>

 

4. 결과 확인

그러면 아래 화면과 같이 500x400px 크기의 지도가 나타나는 것을 확인하실 수 있습니다.

 

 

💻  Nuxt.js 에서 KakaoMap JavaScript API 지도 라이브러리 사용하기

🔗 지도 라이브러리란? 

여기에서는 장소 검색과 주소-좌표 변환을 할 수 있는 services 라이브러리를 사용하여 주소로 장소를 표시해 보도록 하겠습니다.

1. nuxt.config.js 설정

services 라이브러리를 사용하기 위해서는 다시 nuxt.config.js로 돌아와 src 뒷부분에 아래와 같이 &libraries=services 를 추가해주어야 합니다.

//nuxt.config.js

head: {
	script: [{
      		src: "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services"
	}],
}

 

2. script 코드 수정

아래와 같이 코드를 추가해 줍니다.
주소-좌표 변환 객체를 생성하여 위치를 마커로 표시하고, 인포윈도우를 표시하는 코드입니다.

🔗 KakaoMap API - 주소로 장소 표시하기 참고

//index.js

<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    kakao.maps.load(this.initMap);
  },
  methods: {
    initMap() {
      const container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
      const options = {
        //지도를 생성할 때 필요한 기본 옵션
        center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
        level: 5, //지도의 레벨(확대, 축소 정도)
      };
      var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
      this.map = map;

      // 주소-좌표 변환 객체를 생성합니다
      var geocoder = new kakao.maps.services.Geocoder();

      // 주소로 좌표를 검색합니다
      geocoder.addressSearch(
        "제주특별자치도 제주시 첨단로 242",
        function (result, status) {
          // 정상적으로 검색이 완료됐으면
          if (status === kakao.maps.services.Status.OK) {
            var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

            // 결과값으로 받은 위치를 마커로 표시합니다
            var marker = new kakao.maps.Marker({
              map: map,
              position: coords,
            });

            // 인포윈도우로 장소에 대한 설명을 표시합니다
            var infowindow = new kakao.maps.InfoWindow({
              content:
                '<div style="width:150px;text-align:center;padding:6px 0;">Kakao</div>',
            });
            infowindow.open(map, marker);

            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
          }
        }
      );
    },
  },
};
</script>

 

3. 결과 확인

마커와 인포윈도우까지 표시되는 것을 확인하실 수 있습니다.

💡 주의할 사항

저는 Uncaught TypeError: a.Jf is not a function 에러가 발생해서 삽질을 좀 했는데..
이 에러는 var map을 선언해주지 않아서 발생한 에러였습니다.
매개변수나 속성 값으로 넘겨지는 변수들이 잘 선언되어 있는지 꼭 확인해 보세요!
KakaoMap API 문서는 Pure JavaScript 기반이기 때문에 조금씩 수정할 부분이 있다는 점을 기억하신다면
저처럼 많은 시간을 낭비하지 않으실 수 있을 거예요.... 🥲