πŸ—οΈ

MissingKeyMapError

🏑 Home πŸ“– Chapter πŸ‘ˆ Prev πŸ‘‰ Next
⚑  GMapsBook.com is crafted by Jozef Sorocin (🟒 Book a consulting hour) and powered by:
  • g-Xperts (Google Cloud & Business Profile Partner)
Β 

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

Already purchased? Sign in here.