Vue.jsでGoogleMapsAPIを使用して地図を表示する（多分）最小構成

はじめに

Vue環境でGoogleMapsAPIを使用する機会があったので、自分用の備忘録を兼ねて。
Vue.jsじゃなくてもある程度流用できると思います。

公式ドキュメント（APIキーの取得方法も書いてます）

コード

<template>
  <div>
    <div class="map" ref="googleMap" />
  </div>
</template>

<script>
import GoogleMapsApiLoader from 'google-maps-api-loader';

export default {
  name: 'Map',
  data() {
    return {
      google: null,
      mapConfig: {
        center: {
          lat: 35.68944,
          lng: 139.69167
        },
        zoom: 17
      }
    }
  },
  async mounted() {
    this.google = await GoogleMapsApiLoader({
      apiKey: 'API_KEY'
    });
    this.initializeMap();
  },
  methods: {
    initializeMap() {
      new this.google.maps.Map(this.$refs.googleMap, this.mapConfig);
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  width: 100vw;
  height: 100vh;
}
</style>

Maps JavaScript APIを読み込むのにgoogle-maps-api-loaderを使用しました。

もっと実用的なGoogleMapsAPIとVue.jsの組み合わせ方はVue.jsの公式ドキュメントに載っているのでこちらを参考にすると良いかもしれません。