🗝️ MissingKeyMapError
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.
You have likely:
Forgotten to provide the
keyparameter 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"></scriptStored 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_KEYis defined and available at runtime.
Follow 🔑 Obtaining Your Maps API Key(s) and 🌐 Creating a New Google Map or any of the approaches in 🎞️ Working with Frameworks .