こんにちは！今回は Google Maps APIの基本的な使い方 を整理します。
カフェやサロンのWebサイト制作では「アクセスページに地図を表示したい」という要望が多くあります。そのときによく使われるのが Google Maps API です。

Google Maps APIとは？

Googleが提供する地図サービスを、Webサイトやアプリに組み込める仕組み。
例えば：

• 店舗の地図を埋め込み表示
• 現在地からのルート表示
• 複数店舗のピン表示

などに使えます。

APIキーの取得と管理

1. Google Cloud Consoleで「Maps JavaScript API」を有効化
2. APIキーを発行
3. 環境変数（.env.local）で管理

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key_here

※ 公開するWebサイトで使う場合は ドメイン制限を必ず設定 して、不正利用を防ぐことが重要です。

実装の流れ（Next.jsの場合）

1. scriptタグでAPIを読み込む
2. google.maps.Map を使って地図を初期化

useEffect(() => {
  const initMap = () => {
    new google.maps.Map(document.getElementById("map"), {
      center: { lat: 35.6812, lng: 139.7671 }, // 東京駅
      zoom: 15,
    })
  }

  const script = document.createElement("script")
  script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&callback=initMap`
  script.async = true
  window.initMap = initMap
  document.head.appendChild(script)
}, [])

注意点

• APIキーの公開範囲を制限（リファラー設定を忘れない）
• 読み込み順エラーに注意（google is not defined が出やすい）
• 無料枠ありだが、アクセスが多いと課金される可能性もある

まとめ

• Google Maps APIを使えば、Webサイトに「本格的なアクセスページ」を実装できる
• APIキーは .env.local で管理、必ず制限をかける
• Next.jsでも簡単に組み込めるが、scriptの読み込み順に注意

今後は、Google Calendar API や外部サービスとの連携に応用すると、予約サイトやイベントページにも展開できます。