はじめに
React + Vite 環境で Google Maps API を使って地図を表示しようとしたところ、
ブラウザのコンソールに次のようなエラーが出ました。
Error: AuthFailure
InvalidKeyMapError
マップは真っ白で、まったく表示されませんでした。
問題
.env.local に設定した APIキーが「無効（Invalid）」扱いになる
原因は Google Cloud Console 側の設定不備や古いキーの使用
解決方法
1.Google Cloud Console で新しい APIキーを作成
2.「Application restrictions」で
http://localhost:5173/*
を追加（Vite用）
3.「API restrictions」で
Maps JavaScript API のみに制限
4..env.local に新しいキーを登録
VITE_GOOGLE_MAPS_API_KEY=新しいキー
5.開発サーバーを再起動
Ctrl + C
npm run dev
6.ブラウザを Ctrl + Shift + R で強制リロード
結果
AuthFailure 消失
地図が正常に表示
コンソールにはcamera changed: のログが出力
ポイント:
古いキーを削除し、リファラー制限とAPI制限を正しく設定すればOK