Nuxtから google maps a p iを使う

どうも

絶賛長期出張中でホテル暮らしにやっと慣れてきました
はやくおうちに帰りたいです

さて、最近Nuxtを使ってPWAのアプリを作ろうとしてまして、その中でGoogle Map APIを使うことがありました

で、このAPIなんですがブラウザ側から呼び出せる公式のNodeパッケージがありません（Nodeサーバー用のパッケージはあります）
公式のガイドでは「<script>タグをHTML内に埋め込むように」と書いてあります

JavaScriptで動的に<script>タグを追加するサンプルも公式ガイドにはありますが、自分はうまくVue Componentに埋め込められませんでした…

でもなんとかJavaScriptで解決したいってなりましたので、きっと誰かがやってるだろうと思って使えそうなNodeパッケージを探してみましたらいくつかありました

vue2-google-maps

有名なパッケージ
導入してみた記事もめっちゃ出てきた

ただ、Githubでは元の開発者がパッケージをメンテする時間が取れなくなってしまったようで、このissueの最後にあるコメントを見た限りだと今後は更新されなさそう…

OSSの辛いところですね…

gmap-vue

開発が止まったvue2-google-mapの更新を継続するために、別の人がリポジトリをforkして作ったパッケージ

Vue 3の対応も視野に入れてるそうなのでこれからも開発が続くと思われる

google-maps

Google Maps APIを非同期で使えるライブラリ

TypeScriptで作られている
実装はかなりシンプルになっており、APIを非同期に好きなタイミングで呼び出せる

自分は今回google-mapsを使って実装することにしました

Google Mapを表示したいComponentで、以下のように使いました

import { Loader } from 'google-maps'

export default {
  data() {
    return {
      map: null
    }
  },
  mounted: async function() {
    const loader = new Loader(GOOGLE_API_KEY)
    const google = await loader.load()

    // templateの<div ref="map">に地図を表示
    this.map = new google.maps.Map(this.$refs.map, {
      center: {lat: 35.6809591, lng: 139.7673068},  // 東京駅
      zoom: 15,
      streetViewControl: false,
      mapTypeControl: false,
      fullscreenControl: false,
    })
  },
}

このパッケージは単にGoogle Map APIを非同期に呼び出せるようにしただけで、特別な機能などはなくとても使いやすいのでおすすめです

gmap-vueもこれからいろいろ更新が入っていきそうなので、「Vueで使うならこっち！」ていう日もすぐ来そうですね

NuxtからGoogle Maps APIを使う

vue2-google-maps

gmap-vue

google-maps