Vue-google-mapsを使用してVueでGoogleマップを使用する方法
序章
Googleマップには、地図の作成と操作、位置データの視覚化、オートコンプリートによる検索など、堅牢なAPIセットが用意されています。
vue-google-maps は、Vue.js 2用に更新されており、Vue.jsアプリケーションにこれらのAPIを利用するためのツールを提供します。 これには、Googleマップと対話するための充実したコンポーネントのセットと、双方向のデータバインディングが付属しています。
このチュートリアルでは、vue2-google-mapsライブラリを使用し、オートコンプリートを使用して場所を表示するマップを作成します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Vue.jsプロジェクトのセットアップおよびVue.jsコンポーネントの使用にある程度精通していると有益な場合があります。
- Google MapsJavasScriptAPIキー。 これにはGoogleアカウントが必要です。 GoogleCloudPlatformコンソールにログインします。 新しいプロジェクトを作成します。 プロジェクトでGoogleMapsJavaScriptAPIとPlacesAPIを有効にします。 そして、APIキーのクレデンシャルを作成します。
警告： Google Maps APIを使用するときに「開発目的のみ」のメッセージを回避するには、有効なクレジットカードを提供し、GoogleCloudProjectの請求先アカウントに関連付ける必要があります。 これらのAPIの使用に関連する料金に注意してください。
このチュートリアルは、ノードv14.13.1、npm v6.14.8、vue v2.6.11、およびvue2-google-mapsv0.10.7で検証されました。
ステップ1—プロジェクトの設定
@ vue / cli を使用して、新しいVue.jsプロジェクトを作成できます。
ターミナルウィンドウで、次のコマンドを使用します。
npx @vue/cli create --default vue-google-maps-example
これは、Vue.jsプロジェクトを作成するためのデフォルト構成を使用します。
新しく作成されたプロジェクトディレクトリに移動します。
cd vue-google-maps-example
プロジェクトを開始して、エラーがないことを確認します。
npm run serve
Webブラウザでローカルアプリ（通常はlocalhost:8080）にアクセスすると、"Welcome to Your Vue.js App"メッセージが表示されます。
この足場を設置すると、vue2-google-mapsパッケージをインストールできます。
ステップ2—vue2-google-mapsを実装する
次に、vue2-google-mapsパッケージをインストールし、Vue.jsプロジェクトに追加します。
まず、vue2-google-mapsをインストールする必要があります。
npm install [email protected]
コードエディタでsrc/main.jsを開きます。
vue2-google-mapsをインポートし、APIキーを使用してプラグインをインスタンス化します。
src / main.js
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE',
libraries: 'places',
}
});
new Vue({
render: h => h(App),
}).$mount('#app')
必ず'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE'を実際のAPIキーに置き換えてください。 また、オートコンプリート機能を使用するために必要なplacesライブラリを指定します。
警告： APIキーは、意図しない目的で他のユーザーが使用できるため、パブリックリポジトリ（GitHubなど）にコミットするファイルには保存しないでください。
アプリケーションを使用する準備ができたらvue2-google-maps、それを使用するためのカスタムコンポーネントを作成できます。
ステップ3—マップ検索コンポーネントの構築
次に、GmapMap、GmapAutocomplete、およびGmapMarkerを使用する新しいコンポーネントを作成します。
コードエディタで、GoogleMap.vueという新しいコンポーネントを作成します。
src / components / GoogleMap.vue
<template>
<div>
<div>
<h2>Search and add a pin</h2>
</div>
<br>
</div>
</template>
<script>
export default {
name: 'GoogleMap'
}
</script>
次に、コードエディタで、App.vueを変更して次の新しいコンポーネントを使用します。
src / App.vue
<template>
<div id="app">
<GoogleMap />
</div>
</template>
<script>
import GoogleMap from './components/GoogleMap.vue'
export default {
name: 'App',
components: {
GoogleMap
}
}
</script>
Webブラウザーでアプリケーションにアクセスすると、"Search and add a pin"メッセージが表示されます。 このチェックポイントは、この時点までのすべてが正しく機能していることを確認するのに役立ちます。 次に、マップのすべてのピースの追加を開始します。
チュートリアルの目的で、カナダのモントリオール（45.508, -73.587）と一致する緯度と経度の座標を使用して、デフォルトのcenterの場所を定義できます。 これがマップの最初のフォーカスポイントになります。 これらの値は自由に変更してください。
GmapMapコンポーネントを追加します。 そして、center、zoom、およびstyleを定義します。
src / components / GoogleMap.vue
<template>
<div>
<div>
<h2>Search and add a pin</h2>
</div>
<br>
<GmapMap
:center='center'
:zoom='12'
style='width:100%; height: 400px;'
/>
</div>
</template>
<script>
export default {
name: 'GoogleMap',
data() {
return {
center: { lat: 45.508, lng: -73.587 },
}
},
};
</script>
この時点で、ブラウザでアプリケーションにアクセスすると、モントリオールを中心としたGoogleマップが表示されます。
次に、地理位置を追加してユーザーの現在位置を取得し、それに応じて地図を更新します。
src / components / GoogleMap.vue
<template>
<div>
<div>
<h2>Search and add a pin</h2>
</div>
<br>
<GmapMap
:center='center'
:zoom='12'
style='width:100%; height: 400px;'
/>
</div>
</template>
<script>
export default {
name: 'GoogleMap',
data() {
return {
center: { lat: 45.508, lng: -73.587 },
}
},
mounted() {
this.geolocate();
},
methods: {
geolocate: function() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
});
},
},
};
</script>
この時点で、ブラウザでアプリケーションにアクセスすると、現在地の中央にGoogleマップが表示されます。
注：ブラウザがgeolocation情報を使用できるようにするには、プロンプトを受け入れる必要がある場合があります。
次に、オートコンプリートを追加して、ユーザーが地図上の場所を変更できるようにします。
src / components / GoogleMap.vue
<template>
<div>
<div>
<h2>Search and add a pin</h2>
<GmapAutocomplete
@place_changed='setPlace'
/>
</div>
<br>
<GmapMap
:center='center'
:zoom='12'
style='width:100%; height: 400px;'
/>
</div>
</template>
<script>
export default {
name: 'GoogleMap',
data() {
return {
center: { lat: 45.508, lng: -73.587 },
currentPlace: null,
}
},
mounted() {
this.geolocate();
},
methods: {
setPlace(place) {
this.currentPlace = place;
},
geolocate: function() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
});
},
},
};
</script>
このコードは、GmapAutocompleteコンポーネントを追加します。 placeを更新すると、setPlaceが呼び出され、currentPlaceの値が更新されます。
この時点で、ブラウザでアプリケーションにアクセスすると、フィールドに入力された内容に基づいて場所の候補を提供するオートコンプリートフィールドが表示されます。 気になる場合は、console.logをsetPlaceに追加して、place変数の値を調べることができます。
次に、地図上の場所を示すマーカーを追加します。
src / components / GoogleMap.vue
<template>
<div>
<div>
<h2>Search and add a pin</h2>
<GmapAutocomplete
@place_changed='setPlace'
/>
<button
@click='addMarker'
>
Add
</button>
</div>
<br>
<GmapMap
:center='center'
:zoom='12'
style='width:100%; height: 400px;'
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
@click="center=m.position"
/>
</GmapMap>
</div>
</template>
<script>
export default {
name: 'GoogleMap',
data() {
return {
center: { lat: 45.508, lng: -73.587 },
currentPlace: null,
markers: [],
places: [],
}
},
mounted() {
this.geolocate();
},
methods: {
setPlace(place) {
this.currentPlace = place;
},
addMarker() {
if (this.currentPlace) {
const marker = {
lat: this.currentPlace.geometry.location.lat(),
lng: this.currentPlace.geometry.location.lng(),
};
this.markers.push({ position: marker });
this.places.push(this.currentPlace);
this.center = marker;
this.currentPlace = null;
}
},
geolocate: function() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
});
},
},
};
</script>
ここで達成したことを確認しましょう。
GmapAutocompleteとGmapMap（子GmapMarker）を作成しました。 最初に、マップはモントリオールを中心に作成されます。 インスタンスがmounted()になったら、geolocateを呼び出して再度中央に配置します。
ユーザーが検索語を入力してオートコンプリートドロップダウンから選択すると、GmapAutocompleteはsetPlaceを呼び出します。 この選択はcurrentPlaceに保存されます。 追加ボタンをクリックすると、addPlaceが呼び出され、マーカーの位置がmarkersに格納され、GmapMap（およびその後GmapMarker）が更新されます。 また、centerを最後のマーカーの位置に更新しています。
さらに、各場所の完全なplaceオブジェクトをplacesプロパティに保存しています。 これにより、オートコンプリートクエリから返された追加データを、必要に応じてこのコンポーネントまたは子コンポーネントで使用できるようになります。
そして、「アプリ」は次のようになります（アイスランドにいた場合）。
警告：実験が終了したら、誤用の可能性を避けるために、Google Cloud ConsoleにログインしてAPIキーを削除し、関連する請求先アカウントを削除することをお勧めします。
これで、オートコンプリートとマーカー機能を備えたGoogleマップができました。
結論
このチュートリアルでは、Vue.jsアプリケーションでvue2-google-mapsとGoogleMapsAPIの機能を使用する方法を学びました。
これは、訪問者にビジネスの場所、旅行先、および興味のあるポイントを表示する大きな可能性を秘めています。
Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。
