Vue.jsアプリでGoogle Mapsを表示できるようにすると、地図ベースのサービスや店舗情報の視覚化などに活用できます。この記事では、Vue 3環境でGoogle Maps APIと連携し、地図を表示する基本的な方法を解説します。ピン（マーカー）の表示や初期位置のカスタマイズも含めて、シンプルなコード構成で紹介します。
事前準備：APIキーの取得
Google Cloud Platform（GCP）でGoogle Maps JavaScript APIを有効化し、APIキーを取得します。次のURLから設定可能です：
Google Cloud Platform
Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure ...
console.cloud.google.com
- プロジェクトを作成
- 「Maps JavaScript API」を有効にする
- APIキーを発行し、必要に応じてドメイン制限を設定
Google Mapsスクリプトの読み込み
Vueアプリのindex.htmlにGoogle Mapsのスクリプトを追加します。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
YOUR_API_KEYの部分には、発行したAPIキーを設定してください。
地図表示用コンポーネントの作成
<template>
<div ref="mapContainer" class="map-container"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const mapContainer = ref(null)
onMounted(() => {
const map = new google.maps.Map(mapContainer.value, {
center: { lat: 35.681236, lng: 139.767125 }, // 東京駅
zoom: 14
})
const marker = new google.maps.Marker({
position: { lat: 35.681236, lng: 139.767125 },
map: map,
title: '東京駅'
})
})
</script>
<style scoped>
.map-container {
width: 100%;
height: 400px;
border: 1px solid #ccc;
}
</style>
複数マーカーの表示にも対応可能
店舗一覧やイベント情報などを配列で管理し、new google.maps.Marker()をループで生成すれば、複数地点の表示も簡単です。
const locations = [
{ name: 'A店', lat: 35.68, lng: 139.76 },
{ name: 'B店', lat: 35.69, lng: 139.75 }
]
locations.forEach(loc => {
new google.maps.Marker({
position: { lat: loc.lat, lng: loc.lng },
map: map,
title: loc.name
})
})
注意点と拡張ポイント
- APIキーの漏洩防止のため、
.envファイルなどで管理する - Vueでのコンポーネント再利用性を考慮するなら、propsで緯度経度を受け取れるように設計する
- 地図上でのクリックイベントやルート表示なども対応可能
まとめ
Vue.jsとGoogle Maps APIを組み合わせることで、直感的な地図UIをアプリケーションに取り込むことができます。APIキーの管理やイベント連携、複数地点表示などを適切に扱うことで、業務システムや位置情報サービスにも柔軟に対応できます。今後は検索連動やルート表示など、さらなる機能拡張も視野に入れて活用してみましょう。
