Vue.jsコンポーネントのvue2-google-mapsを使用する

個人開発したアプリの宣伝
目的地が設定できる手帳のような使い心地のTODOアプリを公開しています。
Todo with Location

Todo with Location

  • Yoshiko Ichikawa
  • Productivity
  • Free

スポンサードリンク

Vue.jsコンポーネント化されたGoogleMaps、vue2-google-mapsを使用する。

github.com

www.npmjs.com


API Keyの取得

まずはgoogle developer console、 Google Cloud Platform からAPI Key取得する。

  • projectを作成、または選択して
  • ライブラリ - Maps JavaScript APIを有効にする
  • 認証情報 - 認証情報を作成 - APIキーを作成する。

尚、請求情報を入力しないとdevelopment modeでしか使用できない模様。


インストール

npmで簡単にインストールできる。

$ npm install vue2-google-maps


プラグインの使用

Vue.newしている箇所で。vue-cliの場合、main.jsに記述。 取得したAPI Keyを設定する。

+ Vue.use(VueGoogleMaps, {
+   load: {
+     key: 'YOUR API KEY',
+     libraries: 'places',
+     region: 'JP',
+     language: 'ja'
+   }
+ })

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})


コンポーネント

GmapMap

地図表示を行うコンポーネント。map-type-idは試してないけど、APIの設定値に準拠したROADMAP | SATELLITE | HYBRID | TERRAINとかだと思う。

地図内で発火したイベントは、vue2-google-maps/API.md at master · Jeson-gk/vue2-google-maps · GitHub 、のイベントがemitされてくる。

<GmapMap
  :center="{ lat: 35.66606091, lng: 139.41392096 }"
  :zoom="16"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
  @click="mapClick"
></GmapMap>

emitされたイベントは、基本パラメータにイベント情報が渡ってくるようですが、dragのようにパラメータが来ないイベントもあるみたい...

methods: {
  mapClick ($event) {
    //$event.latLngにクリック地点が入っている
  }
}


GmapMapのslot

GmapMapのslotにマーカーや吹き出し等のコンポーネントを指定できる。

多分、この辺りのが使えるはず。 vue2-google-maps/API.md at master · Jeson-gk/vue2-google-maps · GitHub


マーカーと吹き出しのコンポーネント


GmapMarker

マーカーを表すコンポーネント。f-forなんかで描画するとオシャレだと思う。position{lat:..., lng:...}のオブジェクトを渡す。lngなので注意笑

<GmapMap>
    <GmapMarker
      v-for="marker in markers"
      v-bind:key="marker.id"
      :position="marker.position"
      :clickable="true"
      :draggable="true"
/>
</GmapMap>
data: {
  markers: [{id:1, position:{ lat:..., lng:... }}]
}


GmapInfoWindow

吹き出しを表すコンポネント。吹き出しの内容は<slot />でレイアウトできる。吹き出しクローズのイベントはキャプチャできる。

<GmapMap>
    <GmapInfoWindow
      :position="balloon.position"
      :opened="clicked"
      @closeclick="closeFunc"
    >
      <p>メッセージ</p>
    </GmapInfoWindow>
</GmapMap>