[JavaScript/Vue] 구글 맵(Google Map) 튜토리얼

관련 글

1. [JavaScript/Vue] 구글 맵(Google Map) 튜토리얼
2. [JavaScript/Vue] 구글맵(Google Map) 마커
3. [JavaScript/Vue] 구글맵(Google Map) 반경(Circle)
4. [JavaScript/Vue] 구글맵(Google Map) 행정 구역 Polygon 파일 만들기 - 1. 위치 정보 json 파일 준비하기
5. [JavaScript/Vue] 구글맵(Google Map) 행정 구역 Polygon 파일 만들기 - 2. QGIS로 원하는 구역 추출하기
6. [JavaScript/Vue] 구글맵(Google Map) 행정 구역 Polygon 파일 만들기 - 3. Vue에 Polygon 생성하기

 

 

---

 

목차

1. Vue 프로젝트 설치하기

 

2. Vue2 구글 맵 라이브러리 설치하기

 

3. Vue에 구글 지도 모듈 등록하기

 

4. Vue 컴포넌트 생성하기

 

5. 구글 맵 보기

 

6. 결과 확인하기

 

 

---

참고사항

이번 글은 Vue에서 구글맵 사용법을 아래의 사이트를 참고하여 제작해보았습니다!
https://www.positronx.io/how-to-implement-and-show-google-map-in-vue-js-app/ 

Visual Studio Code에서 npm을 이용하는 튜토리얼입니다. 만약 node.js가 설치되어 있지 않으시다면 아래의 링크를 통해서 먼저 설치하시길 바랍니다.
https://onlab94.tistory.com/130

 

---

 

 

1.  Vue 프로젝트 설치하기

    1) 터미널 창에서

npm install -g @vue/cli

       를 입력하여 vue를 설치합니다.

 

    2) 터미널 창에서 vue 프로젝트를 생성합니다.

vue create [프로젝트 명]

       이때 Vue2 구글 맵 라이브러리를 사용하기 때문에 Vue2로 생성 진행했습니다.

 

    3) 터미널 창에서 생성한 프로젝트 디렉터리로 이동합니다.

cd [프로젝트 명]

 

 

2.  Vue2 구글 맵 라이브러리 설치하기

    1) 터미널 창에서 

npm install vue2-google-maps

       를 입력하여 구글 맵을 설치 합니다.

 

 

3. 구글 API 키 얻은 후 라이브러리 추가하기

    1) Google Cloud Platform에 접속합니다.

http://console.cloud.google.com/

Google Cloud Platform

 

    2) Google Cloud Platform 옆의 빨간 테두리 부분을 선택합니다.

 

    3) 새로운 프로젝트를 생성하거나 가지고 있는 프로젝트를 클릭합니다.

 

    4) [탐색 메뉴] → [API 및 서비스] → [사용자 인증 정보]로 들어갑니다.

 

    5) API 키가 존재하는지 확인합니다. API 키가 존재하지 않는다면 [사용자 인증 정보 만들기]로 API 키를 생성합니다.

 

    6) API 키를 생성했으면 [라이브러리]를 클릭합니다.

 

    7) [Maps JavaScript API]와 [Places API]를 검색하여 [사용]으로 설정합니다.

 

 

4. Vue에 구글 지도 모듈 등록하기

    1) src/main.js 파일에 다음과 같이 코드를 수정합니다.

import Vue from 'vue'
import App from './App.vue'

import * as VueGoogleMaps from "vue2-google-maps" // Import package

Vue.config.productionTip = false

Vue.use(VueGoogleMaps, {
  load: {
    key: "API 키 입력",
    libraries: "places",
    region: "KR" // 반드시 추가하셔야됩니다.(추가 안하시면 동해가 일본해로 나타납니다.)
  }
});

new Vue({
  render: h => h(App),
}).$mount('#app')

 

 

5. Vue 컴포넌트 생성하기

    1) src/component/AddGoogleMap.vue 파일을 생성한 뒤 코드를 작성합니다.

       (AddGoogleMap.vue 대신 다른 이름으로 생성하셔도 무관합니다.)

<template>
  <div>
    <gmap-map
        :zoom="14"    
        :center="center"
        style="width:100%;  height: 600px;"
      >
    </gmap-map>
  </div>
</template>
 
<script>
export default {
  name: "AddGoogleMap",
  data() {
    return {
      center: { lat: 37.5642135, lng: 127.0016985 },
      locationMarkers: [],
      locPlaces: [],
      existingPlace: null
    };
  }, 
};
</script>

 

 

6. 구글 맵 보기

    1) src/App.vue 파일을 다음과 같이 수정합니다.

<template>
  <div id="app">
    <AddGoogleMap />
  </div>
</template>

<script>
// 만약 구글 맵 vue 파일을 다른 이름으로 설정하셨으면 
// 변경해서 작성해 주시면 됩니다.
import AddGoogleMap from './components/AddGoogleMap.vue'

export default {
  name: 'App',
  components: {
    AddGoogleMap
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #000000;
  margin-top: 50px;
}
</style>

 

 

7. 결과물 확인하기

    1) 터미널 창에서 

npm run serve

       를 입력하여 실행합니다.

       http://localhost:8080에서 확인할 수 있습니다.