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

2019年9月28日2020年1月30日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と同じでした。

使い方

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