【Vue】Vue2-Google-Mapsのオプション(center, zoom, map-type-id)

2019年9月28日Google, Vue.js/Nuxt.js, フロントエンド

Nuxt.js(Vue.js)でGoogleマップAPIの埋め込みをするときに便利なVue2-google-mapのオプションについて。

Google Map APIの利用にはAPIキーが必須です。<詳細はこちら>

Vue2-google-mapとは

Google Map APIをVue.jsで使いやすくしたプラグイン。
データを用意するだけでピンの位置を配置するなど、通常のGoogle Map APIだけでは難しい実装がv-bindなどをサポートすることで実現できる。

center

lat: 緯度
lng
: 経度

地図を表示するときの中心座標を設定できます。
{lat: 35.6811884, lng: 139.7671906}とかって設定します。

zoom

(広域)1 〜 21(詳細)

float型なので小数点で指定可。

倍率ごとのイメージは下記記事が参考になります。

map-type-id

roadmap Googleマップ標準の道路地図
satellite 航空写真
hybrid 航空写真+道路地図
terrain 地形図

なかなか調べても出なくて困ってたんですけど、Google Map APIと同じでした。

使い方

<GmapMap
    :center="center"
    :zoom="zoom"
    map-type-id="roadmap"
  >

bindできるので、script側でいろいろと設定できます。