🏡 Home 📖 Chapter 👈 Prev 👉 Next

⚡  GMapsBook.com is crafted by Jozef Sorocin (🟢 Book a consulting hour) and powered by:

• Spatialized.io (Elasticsearch & Google Maps consulting).
• and Garages-Near-Me.com (Effortless parking across Germany)

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)

1. Install the CLI.
2. Install the alpha or beta components.