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.

Solutions

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