【Web】Vue.jsでGoogleMapを表示する

有言実行ができないことで有名なkwpです。こんばんは。
ゲームの記事ばかりですが、一応このブログはオールジャンルなので、たまにはWebのことでも。
最近案件で、Vue.jsでGoogleMapを表示するという実装を行いました。
普通にGoogleMapを表示するならやったことありますが、フレームワークで表示する際に注意することをメモ程度に。

GoogleMapの表示方法

今更かもしれませんが、GoogleMapの表示の仕方から。
少し前から、GoogleMapは有料のサービスになりました。
昔はAPIを無料で使用できて、表示も無料でできた気がしたんですが。。
とは言っても無料枠があったりと、かなり親切な有料サービスだと思います。
アクセスが集中しないようなサイトなら無料枠で事済むのではないでしょうか。

さて、GoogleMapの表示手順は以下です。

① Googleアカウントを取得する
② Google Cloud Platformへアクセスする
 https://console.cloud.google.com/
③ メニューから「APIとサービス」を選択し、対象のAPIを使用できるようにする
 ※今回は表示のみなので、「Maps JavaScript API」を選択します
④ サイドバーから認証情報を選択して、「認証情報を作成」を押す
 「APIキー」を押して、キーを作成する
 セキュリティの観点から(よくわかりません←)良くないので、キーの制限を押す
 URLを指定するのか、IPで制限するのかを選んで、対象のURL、もしくはIPアドレスを入力する
⑤ 実装に導入する

フレームワークとかを使用しないのであれば、下記のような実装で行けると思います。

<div id="map"></div>

<script src="http://maps.google.com/maps/api/js?key={YOUR_API_KEY}&language=ja"></script>

<script>
var position = new google.maps.LatLng(YOUR_lat, YOUR_lng);
var options = {
 zoom: 15,
 center: position,
 mapTypeId: 'roadmap'   //地図の種類
};
var map = new google.maps.Map(document.getElementById('map'), options);
</script>

ここまでが普通の実装になるかと思います。

スポンサードサーチ

Vueの実装

Vueの場合はこれを利用しようとするとなぞのエラーが頻発します。
そもそも私の書き方の問題な気もしますが。。

google is not defined!

みたいなね。何度も見てるとイライラしてきますね(ω)!
ということで、とっても便利なnpmのパッケージを使いました。
その名もvue2-google-maps!これは素晴らしい。。
プロジェクトのルートディレクトリで下記のコマンドを実行します。
このプロジェクトはvue-cliを使用してプロジェクトを作ってます

npm install vue2-google-map --save

これでVueの中で上記のパッケージが使えるようになります。

<main.js>

import * as GoogleMaps from 'vue2-google-maps'
Vue.use(GoogleMaps, {
  load: {
    key: 'YOUR_API_KEY',
    libraries: 'places'
  }
});

{YOUR_API_KEY}の部分に先ほどGoogle Cloud Platformで取得したAPIキーを入れてください。

<MapComponent.vue>

<template>
  <div id="map">
      <GmapMap :center="center" :zoom="zoom" style="width: 100%; height: 100%;" :options="mapStyle">
          <GmapMarker v-for="(m, id) in marker_items"
          :position="m.position"
          :title="m.title"
          :key="id"
          :icon="m.icon"
          :clickable="true"
          :draggable="true">
          </GmapMarker>
      </GmapMap>
  </div>
</template>

<script>
export default {
  name: 'MapComponent',
  components: {
  },
  data() {
      return {
        center: { lat: 35.698304, lng: 139.766325 },
        zoom: 18,
        mapStyle: {
            disableDefaultUI: true, // 表示のオプションを指定できます。
            styles: [
                // カスタマイズで使用したスタイルなどはここに。
            ]
        },
        marker_items: [
{ position: { lat: YOUR_lat, lng: YOUR_lng }, title: 'title' }]
      }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
省略...
</style>

オプションについては、以下の公式を閲覧ください。
https://developers.google.com/maps/documentation/javascript/reference/map

こんな感じに実装することができます。
カスタマイズにも対応していますし、アイコンも変更できます。
アイコンを変更する場合は、marker_items:[]の中にiconというプロパティで追加していただければできます。

まとめ

ということで、簡単ですが、Vueを使ってGoogleMapを表示する。でした。
意外とあれこれやってできなかったりしたので、誰かの参考になれば。
まあならなくても自分のメモとしてw

ではでは〜

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です