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

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>

リンク