프로그램 개발/JavaScript

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

(ㅇㅅㅎ) 2021. 8. 14. 19:37
728x90
반응형

관련 글

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

하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요.

accounts.google.com

 

    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에서 확인할 수 있습니다. 

 

 

반응형