【Vue.js】Google Maps APIと連携して地図を表示する方法

# .env.local（Gitに入れない）
VITE_GOOGLE_MAPS_API_KEY=取得したAPIキー

// utils/loadGoogleMaps.js
let promise = null

export function loadGoogleMaps(apiKey) {
  // すでに読み込み済みなら、何もしない
  if (window.google?.maps?.importLibrary) return Promise.resolve()
  if (promise) return promise

  promise = new Promise((resolve, reject) => {
    window.__onGoogleMapsLoaded = resolve

    const script = document.createElement('script')
    script.src =
      'https://maps.googleapis.com/maps/api/js' +
      `?key=${apiKey}&v=weekly&loading=async&callback=__onGoogleMapsLoaded`
    script.async = true
    script.onerror = () => {
      promise = null // 失敗したら、次回やり直せるようにする
      reject(new Error('Google Mapsの読み込みに失敗しました'))
    }
    document.head.append(script)
  })
  return promise
}

<script setup>
import { ref, shallowRef, onMounted, onBeforeUnmount, watch } from 'vue'
import { loadGoogleMaps } from '@/utils/loadGoogleMaps'

const props = defineProps({
  center: { type: Object, default: () => ({ lat: 35.681236, lng: 139.767125 }) }, // 東京駅
  zoom: { type: Number, default: 14 },
  locations: { type: Array, default: () => [] } // [{ name, lat, lng }]
})

const container = ref(null)
const error = ref('')
// 地図オブジェクトはVueのリアクティブにしない（shallowRef）
const map = shallowRef(null)
let markers = []
let AdvancedMarkerElement = null
let InfoWindow = null

function renderMarkers() {
  markers.forEach((m) => (m.map = null)) // 古いマーカーを地図から外す
  markers = props.locations.map((loc) => {
    const marker = new AdvancedMarkerElement({
      map: map.value,
      position: { lat: loc.lat, lng: loc.lng },
      title: loc.name
    })
    const info = new InfoWindow({ content: loc.name })
    marker.addListener('click', () => info.open({ anchor: marker, map: map.value }))
    return marker
  })
}

onMounted(async () => {
  try {
    await loadGoogleMaps(import.meta.env.VITE_GOOGLE_MAPS_API_KEY)
    const { Map, InfoWindow: IW } = await google.maps.importLibrary('maps')
    const { AdvancedMarkerElement: AME } = await google.maps.importLibrary('marker')
    AdvancedMarkerElement = AME
    InfoWindow = IW

    map.value = new Map(container.value, {
      center: props.center,
      zoom: props.zoom,
      mapId: 'DEMO_MAP_ID' // AdvancedMarkerElementに必須。本番ではCloud Consoleで作成したIDに
    })
    renderMarkers()
  } catch (e) {
    error.value = '地図を読み込めませんでした。'
  }
})

watch(() => props.locations, () => map.value && renderMarkers(), { deep: true })

onBeforeUnmount(() => {
  markers.forEach((m) => (m.map = null))
  markers = []
})
</script>

<template>
  <p v-if="error" role="alert">{{ error }}</p>
  <div ref="container" class="map"></div>
</template>

<style scoped>
/* 高さを指定しないと0pxになり、地図が表示されない */
.map { width: 100%; height: 400px; }
</style>

<script setup>
import GoogleMap from '@/components/GoogleMap.vue'

const shops = [
  { name: '東京駅', lat: 35.681236, lng: 139.767125 },
  { name: '上野駅', lat: 35.713768, lng: 139.777254 }
]
</script>

<template>
  <GoogleMap :locations="shops" :zoom="12" />
</template>

// NG: 非推奨。コンソールに警告が出る
new google.maps.Marker({ position, map, title })

// OK: AdvancedMarkerElement（mapIdが必要）
const { AdvancedMarkerElement } = await google.maps.importLibrary('marker')
new AdvancedMarkerElement({ position, map, title })