Vue.jsでgoogle mapを利用する

ゆるっと Advent Calendar 2019 ２日目です。
今回はVue.jsでgoogle mapを使う際によく使いそうなところを紹介できたらと思います。

下準備

今回使用するライブラリは以下になります。

www.npmjs.com

yarn add vue2-google-maps

で追加できます。

index.jsを以下のように書き換えます。google mapのapiキーの取得に関しては割愛させていただきます。

import Vue from 'vue'
import App from './App.vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: process.env.VUE_APP_GOOGLE_MAP_API,
    libraries: 'places',
    region: 'JP',
    language: 'ja'
  }
})
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

google mapの表示

Quickstartに書いてるまんまのコードです。GmapMapコンポーネントを利用します。

<template>
  <div>
    <GmapMap
      :center="{lat:10, lng:10}"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
      />
    </GmapMap>
  </div>
</template>

google mapの設定

optionsプロパティにMapOptionsを渡せます。 例としてStreetViewの表示を消します。

<GmapMap
      :center="{lat:10, lng:10}"
      :zoom="7"
      :options="{streetViewControl: false}"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
      />
    </GmapMap>

StreetViewのアイコンが消えているのが確認できました。

イベントの発火

全部試していませんが、公式に記載されているイベントトリガを使えます。 試しにマップのドラッグが終了した際にメソッドを実行してみます。

<template>
  <div>
    <GmapMap
      :center="{lat:10, lng:10}"
      :zoom="7"
      :options="{streetViewControl: false}"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
      @dragend="onDragEnd"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
      />
    </GmapMap>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    onDragEnd() {
      console.log("hoge");
    }
  }
};
</script>

表示している領域の座標取得

getBoundsを使います。LatLngBoundsクラスが返されるのでgetCenterやgetSouthWestで中心座標や南西の座標が取得できます。

マーカの設置

すでにQuickstartでGmapMakerが定義されていますのでこれを流用してpositionを設定すればマーカーが設置できます。dataプロパティにmarkersを定義します。

export default {
  name: "HelloWorld",
  data() {
    return {
      markers: [{ position: { lat: 10, lng: 10 } }]
    };
  },
  methods: {
    onDragEnd() {
      console.log("hoge");
    }
  }
};

マーカーを設置できました。

マーカの上にWindowを表示

GmapInfoWindowコンポーネントを利用します。マーカーをクリックしたらWindowを表示します。 optionsプロパティでInfoWindowOptionsを設定します。今回はpixelOffsetだけ設定します。

<template>
  <div>
    <GmapMap
      :center="{lat:10, lng:10}"
      :zoom="7"
      :options="{streetViewControl: false}"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
      @dragend="onDragEnd"
    >
      <GmapInfoWindow
        :options="infoOptions"
        :position="infoWindowPos"
        :opened="infoWinOpen"
        @closeclick="infoWinOpen=false"
      >
        hoge</GmapInfoWindow>
      <GmapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="toggleInfoWindow(m)"
      />
    </GmapMap>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      markers: [
        { position: { lat: 10, lng: 10 } },
        { position: { lat: 11, lng: 11 } }
      ],
      infoOptions: {
        pixelOffset: {
          width: 0,
          height: -35
        }
      },
      infoWindowPos: null,
      infoWinOpen: false
    };
  },
  methods: {
    onDragEnd() {
      console.log("hoge");
    },
    toggleInfoWindow(marker) {
      this.infoWindowPos = marker.position;
      this.infoWinOpen = true;
    }
  }
};
</script>

hogeと書かれたWindowが表示されました。

まとめ

google mapを使用する際に使いそうな所を紹介しました。
結構細かく設定できるのでドキュメントを色々覗いてみるのも面白いと思います。