Vue.jsコンポーネント化されたGoogleMaps、vue2-google-mapsを使用する。
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>