NuxtでGoogle Mapを使う

はじめはGoogle Maps APIを直接利用しようかと思ったがちょっとめんどくさそうだったので、ライブラリを使う方向に切り替えた。
Nuxt専用のライブラリとかはちょっといいのが見つけられなかったので、以下のVue用のライブラリを使うことにした。

GitHub - xkjyeah/vue-google-maps: Google maps component for vue with 2-way data binding

Nuxt専用ではないがちゃんとNuxtで利用されることも考えられているらしく、ご丁寧にQuickstartまで作成されてある。基本的にはこれに沿って以下のようなNuxtのプラグインを作成（オプションパラメータはもっといじれるかも）した後、

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

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places'
  },
  installComponents: true
})

nuxt.config.jsで上記プラグインの追加と以下のtranspileの設定を追加し、

  build: {
    extend(config, ctx) {},
    transpile: [/^vue2-google-maps($|\/)/]
  }

使いたいコンポーネント内でGmapMapのタグを使用してやればGoogle Mapを表示することが出来た。

ref属性を使えばGoogle Mapのインスタンスにアクセスできるので、それを使えばgeolocation.getCurrentPositionで取得したユーザの現在地にMapの中心を移動させたりできることも確認できた。Google Mapのインスタンスへのアクセス例は上記Quickstart内にある。

Google Maps APIのgoogleオブジェクトへのアクセスも出来るらしいがまだ未確認なので、必要があれば試してみたい。