[Solved] How to Fix "InvalidKey/AuthFailure" Error in Google Maps API (React + Vite)

Introduction

When attempting to display a map using the Google Maps API in a React + Vite environment,
the following error appeared in the browser console:

Error: AuthFailure
InvalidKeyMapError

The map was completely white and didn't display at all.

Problem

The API key set in .env.local is marked as "Invalid."

This is due to incorrect settings on the Google Cloud Console or the use of an old key.

Solution

1. Create a new API key in the Google Cloud Console.

2. Add "http://localhost:5173/*" to "Application restrictions" (for Vite).

3. Restrict to Maps JavaScript API only under "API restrictions."

4. Register the new key in .env.local.
   

VITE_GOOGLE_MAPS_API_KEY=newkey

1. Restart the development server.

Ctrl + C
npm run dev

1. Force reload the browser with Ctrl + Shift + R.

Results

AuthFailure disappears.

The map displays normally.

The console displays the camera changed: log.

Tip:

Delete the old key and set the referrer and API restrictions correctly.