Daddy Makers: 간단한 Web 기반 공간정보 서비스 개발을 위한 Google map과 Vue.js 연동 방법

이 글은 웹 기반 Google map과 Vue.js 연동 방법을 예제를 통해 간단히 구현해 본다.
참고로, Vue.js는 node.js를 사용하며, node.js는 서버 개발을 쉽게 지원하는 플랫폼이며, Vue.js 는 node.js 에서 실행될 수 있는 동적 웹 UI(user interface) App 개발을 지원하는 유명한 프레임웍이다.

이를 활용하면, 인터넷 접속되는 다양한 디바이스에서 동작 가능한 공간정보 기반 앱 서비스를 제공하는 서버를 간단히 개발할 수 있다. 예를 들어, 맵위에 마커를 생성하거나, 계산된 결과를 오버랩하여 표시할 수 있다. 마커 등은 이벤트를 받을 수 있으므로, 클릭 시 좀 더 상세한 정보나 뷰를 표시하도록 할 수 있다.

이 글에서 node.js나 vue 내용은 자세히 설명하지 않는다. 관련 내용은 아래 링크를 참고한다. 다음(카카오) 맵 연동 방법은 이 글을 참고한다.

Node.js 메뉴얼
Vue.js 메뉴얼

Google map을 사용하는 방법은 크게 두 가지가 있다. 하나는 직접 google map 객체를 사용하는 방법이고, 다른 하나는 npm 에서 설치가능한 google maps 패키지를 사용하는 방법이다. 이 글은 두 가지 방법 모두 소개한다.

이 글의 예제를 따라한 결과는 다음과 같다.

npm 에서 설치한 vue2-google-maps 패키지 이용 결과

스마트폰에서 실행된 구글맵 앱 서비스(iPhone 9. Chrome. Safari)

Google map 객체 직접 이용 결과

환경 설정
Node.js와 Vue를 설치하고, Google Map API key값을 console.cloud.google.com 에서 획득한 한다(API key값 생성 방법은 레퍼런스 참고).

Google Cloud Platform

Google Map API

다음과 같이 Vue CLI를 설치한다.
npm install -g vue-cli

구글맵 객체 기반 지도 앱 개발
다음과 같이 패키지를 설치하고, 프로젝트를 생성해 보자.
vue init webpack-simple mapapp
cd mapapp
npm install
npm run dev

결과, 간단한 vue app이 서버로 실행될 것이다. 종료하고, vue 컴포넌트를 개발해 본다.

프로젝트 폴더의 index.html 파일을 다음과 같이 코딩한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>communicating-between-vue-components</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=API key value"></script>

<script src="/dist/build.js"></script>
</body>
</html>

script에 생성된 google api key값을 설정한다.

main.js 를 코딩한다. 이 main.js는 GoogleMap, ListView, Sidebar 컴포넌트를 사용한다.
import Vue from 'vue'
import App from './App.vue'
import GoogleMap from './GoogleMap'
import ListView from './ListView'
import Sidebar from './Sidebar'

window.EventBus = new Vue({
data(){
return {
sanfrancisco: [37.78268, - 122.41136]
}
}
});

Vue.component('GoogleMap', GoogleMap);
Vue.component('ListView', ListView);
Vue.component('Sidebar', Sidebar);

new Vue({
el: '#app',
render: h => h(App)
});

App.vue 를 코딩한다. App은 각 컴포넌트가 속할 구역을 템플릿으로 정의한다.
<template>
<div id="app" class="container">
<div class="row">
<div class="col-4">
<sidebar></sidebar>
</div>
<div class="col-8">
<google-map></google-map>
</div>
</div>
<div class="row">
<list-view></list-view>
</div>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

GoogleMap.vue를 src 폴더에 다음과 같이 만든다. div의 map에 Google Map을 mount 하고, 맵 객체를 생성해 설정한다.
<template>
<div>
<h1>Map is here</h1>
<div id="map" class="h-250"></div>
</div>
</template>

<style scoped>
#map {
margin: 0 auto;
background: gray;
}
.h-250 {
height:250px;
}
</style>
<script>
import Vue from 'vue';
export default {
props: {
'latitude': {
type: Number,
default() {
return EventBus.sanfrancisco[0]
}
},
'longitude': {
type: Number,
default() {
return EventBus.sanfrancisco[1]
}
},
'zoom': {
type: Number,
default() {
return 14
}
},
},
mounted() {
this.$markers = [];
this.$map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(this.latitude, this.longitude),
zoom: this.zoom
});
Vue.nextTick().then(()=>{
this.clearMarkers();
});
},
created(){
EventBus.$on('clear-markers', ()=>{
this.clearMarkers();
this.$markers = [];
});
EventBus.$on('add-marker', (data)=>{
let marker = this.makeMarker(data.latitude, data.longitude);
this.$markers.push(marker);
});
},
data(){
return {};
},
methods: {
makeMarker(latitude, longitude) {
return new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
icon: null,
map: this.$map,
title: null,
});
},
clearMarkers(){
for( let i = 0; i < this.$markers.length; i++ ){
this.$markers[i].setMap(null);
}
}
}
}
</script>

ListView.vue를 src 폴더에 다음과 같이 만든다. 이 컴포넌트는 마커 리스트를 보여준다.

<div>

<h1>ListView</h1>

<p>Marker count: {{ markers.length }}</p>

<thead>

<tr>

<th>Index</th>

<th>Latitude</th>

<th>Longitude</th>

</tr>

</thead>

<tbody>

<td>{{ marker.index }}</td>

<td>{{ marker.latitude }}</td>

<td>{{ marker.longitude }}</td>

</tr>

</tbody>

</table>

</div>

</template>

export default {

created(){

EventBus.$on('add-marker', (marker)=>{

marker['index'] = this.index;

this.index++;

this.markers.push(marker);

});

EventBus.$on('clear-markers', ()=>{

this.markers = [];

this.index = 0;

});

data(){

return {

index: 0,

markers: []

};

}

</script>

Slidebar.vue를 src 폴더에 다음과 같이 만든다. 이 컴포넌트는 마커를 생성하거나 삭제하는 버튼을 생성하고, 클릭 시에 이벤트를 발생한다. 이벤트는 EventBus를 통해 해당 기능을 실행하는 함수를 호출하도록 되어 있다.

<template>
<div>
<h1>Sidebar</h1>
<input type="number" step="0.0001" class="form-control" v-model="latitude">
<input type="number" step="0.0001" class="form-control" v-model="longitude">
<button @click="addMarker" class="btn btn-danger">Add marker</button>
<button @click="clearMarkers" class="btn btn-default">Clear markers</button>
</div>
</template>
<script>
export default {
data(){
return {
latitude: EventBus.sanfrancisco[0],
longitude: EventBus.sanfrancisco[1]
};
},
methods: {
addMarker(){
EventBus.$emit('add-marker', {
latitude: this.latitude,
longitude: this.longitude
});
},
clearMarkers(){
EventBus.$emit('clear-markers');
}
}
}
</script>

이제 다음과 같이 실행해 보자.
npm run dev

그럼 다음과 같은 결과를 볼 수 있다. 개발용으로 Google map api 키값을 발급받은 것이라 development purposes only 문구가 맵위에 오버랩된다. 그래도, embedded된 구글맵을 테스트해보는 것에는 문제가 없다.

구글 맵에 marker를 add해 볼 수 있고, 그 리스트를 확인할 수 있다. 시간이 되면 marker에 event를 추가해 보자. 큰 문제 없이 동작하는 것을 확인할 수 있다.

vue2-google-maps 기반 지도 앱 개발

vue2-google-maps는 손쉽게 Vue기반 구글 맵을 사용할 수 있도록 만든 패키지이다. 이 예제에서는 vuetify란 패키지를 통해 좀 더 스타일 좋은 사용자 인터페이스 기능을 사용하겠다. 이를 사용하기 위해 다음과 같이 명령을 실행한다.

vue create map
cd map
vue add vuetify
npm install vuetify-dialog
npm i vue2-google-maps

main.js를 다음과 같이 코딩한다. vuetify와 dialog를 사용하기 위해 import를 하고, vue.use를 통해 VueGoogleMaps 사용을 설정한다. 그리고, 소스에서 key 값은 Google Map API키 값을 입력한다.
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VuetifyDialog from 'vuetify-dialog'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
load: {
key: 'Input Google Map API key value',
libraries: 'places', // This is required if you use the Autocomplete plugin
// OR: libraries: 'places,drawing'
// OR: libraries: 'places,drawing,visualization'
// (as you require)

//// If you want to set the version, you can do so:
// v: '3.26',
}
})

Vue.config.productionTip = false

Vue.use(VuetifyDialog, {
context: {
vuetify
}
})

new Vue({
vuetify,
render: h => h(App)

}).$mount('#app')

App.vue를 다음과 같이 코딩한다. HelloWorld컴포넌트를 렌더링하기 위해 template에 이를 정의하고, script에서 HelloWorld 컴포넌트를 import한다.
<template>
<v-app>
<v-content>
<HelloWorld/>
</v-content>
</v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
name: 'App',

components: {
HelloWorld,
},

data: () => ({
//
}),
};
</script>

HelloWorld.vue 컴포넌트를 다음과 같이 코딩한다. 앞서 GoogleMap를 vue에서 use하였으므로, GmapMap 컴포넌트를 사용할 수 있다. 옵션은 center위치, zoom 비율 등 다양한 값을 정의할 수 있다.
이 예제에서는 Marker를 2개 만들고, 마커를 클릭하였을 때 이벤트를 발생시켜, Vuetify 스타일 다이얼로그를 생성한다. 다이얼로그는 html로 기술하고, 이미지 사진을 추가하였다.
<template>
<v-container>
<GmapMap
:center="{lat:10, lng:10}"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="clickMarker"
/>
</GmapMap>
</v-container>
</template>

<script>
export default {
name: 'HelloWorld',

data() {
return {
markers: [{
position: {
lat: 10.0,
lng: 10.0
}
}, {
position: {
lat: 11.0,
lng: 11.0
}
}]
};
},
methods: {
clickMarker: function () {
this.$dialog.confirm({
text: "What's your name? <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Natgeologo.svg/1200px-Natgeologo.svg.png' height=100/><input value='input'></input>", title: 'Warning'});
}
}
};

</script>

실행 결과는 다음과 같다.
npm run serve