[Vue.js/개발일지] 04. 오시는 길 제작하기 (Kakao map API)

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

카카오 지도 API는 무료로 제공되고 있다. 지도 API KEY를 등록하면 바로 사용할 수 있도록 되어있다.

https://developers.kakao.com/

Kakao Developers

카카오 디벨로퍼 홈페이지에서 API 키를 받고 무료로 사용 할 수 있다. 지도뿐만 아니라 카카오톡 채널, 로그인 메시지 등등 다양한 서비스도 무료로 제공하고 있다.

다음과 같은 api key를 발급 받아야 지도로 사용할 수 있다. 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

이런 식으로 스크립트를 가져오면 된다. 

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
	level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

일반 에크마 스크립트에선 이런 식으로 지도를 생성할 수 있지만 뷰에선 살짝 다르게 적어줘야 한다. 나는 지도에다가 마커를 사용해야 했기 때문에 kakao map api 홈페이지의 sample 페이지를 참고해서 작성 해주었다.

<script>
export default {
  mounted() {
    window.kakao && window.kakao.maps
      ? this.initMap()
      : this.addKakaoMapScript();
  },
  methods: {
    addKakaoMapScript() {
      const script = document.createElement("script");
      script.onload = () => kakao.maps.load(this.initMap);
      script.src =
        "http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=4cc0e1f9785443b62908fe7e5418591c";
      document.head.appendChild(script);
    },
    initMap() {
      var container = document.getElementById("map"); 
      var options = {
        center: new kakao.maps.LatLng(35.3351575394625, 129.01074046469583), 
        level: 2
      };

      var map = new kakao.maps.Map(container, options);
      var markerPosition  = new kakao.maps.LatLng(35.3351575394625, 129.01074046469583); //마커 표시 위치
      var marker = new kakao.maps.Marker({
      position: markerPosition
      });
      marker.setMap(map);
    }
  }
};
</script>

마운트에 src를 넣어줬다. 사실 어떻게 넣을지 모르겠어서 구글링으로 찾았다.

 

<template>
  <div class="container-md">
    <div class="main-title">
      오시는 길
      <hr />
    </div>
    <div id="map"></div>

    <div class="titles">
      학교 주소
    </div>
    <div class="words">
      경상남도 양산시 물금읍 황산로 733-21 3층
    </div>
    <div class="titles">
      학교 전화번호
    </div>
    <div class="words">
      TEL) 055-387-2941
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    window.kakao && window.kakao.maps
      ? this.initMap()
      : this.addKakaoMapScript();
  },
  methods: {
    addKakaoMapScript() {
      const script = document.createElement("script");
      script.onload = () => kakao.maps.load(this.initMap);
      script.src =
        "http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=4cc0e1f9785443b62908fe7e5418591c";
      document.head.appendChild(script);
    },
    initMap() {
      var container = document.getElementById("map"); 
      var options = {
        center: new kakao.maps.LatLng(35.3351575394625, 129.01074046469583), 
        level: 2
      };

      var map = new kakao.maps.Map(container, options);
      var markerPosition  = new kakao.maps.LatLng(35.3351575394625, 129.01074046469583); //마커 표시 위치
      var marker = new kakao.maps.Marker({
      position: markerPosition
      });
      marker.setMap(map);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
#map {
  width: 100%;
  height: 500px;
  
}
.container-md{
  
  text-align: center;
  font-family: 'Nanum Gothic', sans-serif;
  margin-top: 60px;

  .main-title{
    margin-bottom: 20px;
    font-size: 40px;
    font-weight: 700;
  }

  .titles{
    margin-top: 100px;
    margin-bottom: 30px;
    font-weight: 700;
    font-size: 32px;
    float:none;
  }
  .words{
    font-weight: 400;
    font-size: 17px;
  }
}
</style>

https://oica.netlify.app/#/RoadMap

온누리 기독 학교

이곳에서 볼 수 있다.