Error explanation

As we discussed in Obtaining Your Maps API Key(s), each Google Map must be initialized with an API key.

If the key is malformed or simply absent from the initialization code, Google Maps responds with a MissingKeyMapError.

Likely causes

You have likely:

Forgotten to provide the key parameter in the <script> tag. The script tag should look something like this:

<script async defer src="<https://maps.googleapis.com/maps/api/js?key=Aiza...&callback=initMap>"></script

Stored the API key in an environment variable but misspelled its name. For instance, if you’re using React (as seen in 🎞️ Working with Frameworks), your code might look like this:
```
import { GoogleMap, GoogleMapProps, LoadScript } from '@react-google-maps/api';

function WrappedGoogleMap({ ...props }: GoogleMapProps) {
  return (
    <LoadScript
      googleMapsApiKey={process.env.PUBLIC_GMAPS_API_KEY}
	    ...
		>
		...
	 </LoadScript>
	)
}
```
Do make sure that process.env.PUBLIC_GMAPS_API_KEY is defined and available at runtime.

https://tally.so/r/w2a2jM

Solutions

Follow Obtaining Your Maps API Key(s) and Creating a New Google Map or any of the approaches in Working with Frameworks.

Make sure your API is restricted and available at runtime.

Bonus: programmatically creating API keys

If you’re a platform managing other people’s Google Maps API keys, here’s some good news — you can programmatically create, list, delete, and patch API keys.

`gcloud` Command Line Interface (CLI)

Install the CLI.
Install the alpha or beta components.

Error explanation

Likely causes

Solutions

Bonus: programmatically creating API keys

gcloud Command Line Interface (CLI)

`gcloud` Command Line Interface (CLI)