Google Maps API error: MissingKeyMapError [SOLVED]
Are you going crazy due to the Google Maps API error: MissingKeyMapError, suddenly showing in your browser console?
In this guide you will find everything you may ever need to get rid of it, once and for all.
- Where does the problem come from?
- How to fix the error: step-by-step tutorial
- I’m not a programmer, what can I do?
- How to manage your API keys
Where does the problem come from?
The answer comes directly from a Google employee:
We’ve just announced some changes to the Google Maps APIs authentication and usage limits: http://googlegeodevelopers.blogspot.com.au/2016/06/building-for-scale-updates-to-google.html
Usage of the Google Maps APIs now requires a key.
Are you using the Maps API from localhost or a recently launched domain, or was your domain active prior to today? Just wanting to check, since all previously active domains should have been grandfathered for keyless usage, so a previously active domain getting the MissingKeyMapError may be a bug.
In other words, if you weren’t already using Maps API on your domain before June 22nd, 2016, you will be forced to get a API key to get rid of this nasty error.
Keep in mind that each free API key comes with a 25,000 map loads per project per day limit (you can always create multiple projects, though). For very large websites, you could possibly need a Premium Plan license.
This obviously apply to every environment, disregarding the platform (WordPress, Joomla, etc.) or plugin you are using.
How to fix the error: step-by-step tutorial
Don’t be afraid, getting an API key (and integrating it) is really fast and simple:
1. Follow this link and click on Get a key:
2. Select an existing project (or make a new one), agree with the terms and click on Enable API:
3. Copy the generated key and optionally restrict the key’s usage in the API Console (for the first try, you’d better leaving it unrestricted):
4. Locate the file that contains the Google Maps script code on your website, and append your API key to it as a parameter:
If there aren’t other parameters, just add ?key=YOUR_API_KEY at the very end of the src path; otherwise, add &key=YOUR_API_KEY instead, like this:
Obviously, in both cases you must replace YOUR_API_KEY with your actual API key code.
5. Your API key should be up and running within 5 minutes. Enjoy!
I’m not a programmer, what can I do?
Simply point out this issue (and solution) to the maintainer of the platform, plugin or theme you are using, and hopefully he will make the required changes to the code for you!
Basically, he just needs to add the new parameter to the code, and to provide you a simple field in which you can enter your API key (follow the steps mentioned in the previous section to get one).
UPDATE: If you are using WordPress, while waiting for an official fix by the developers of your theme/plugin you could give try to this plugin for a temporary fix (thank to Lucas for the suggestion). Just install it, go to Settings > Google API KEY and enter your API key (follow the tutorial above to get one).
How to manage your API keys
You can manage your keys from the Google Developers Console.
Simply login, select your project from the navigation bar, then click on Credentials and edit or delete any key through the buttons on the right:
For example, you could restrict the usage of your API keys on certain websites or apps only, thus preventing anybody else from stealing your daily quota:
Here there are some common errors you may encounter in your browser console during the API key integration process.
Google Maps API error: RefererNotAllowedMapError
Edit your API key (as explained in the section above) and add your URL to the allowed referrers field. If you want to allow any referrer, simply choose None as restriction value.
You can find further information on the allowed referrers syntax in the dedicated article.
Google Maps API error: ApiNotActivatedMapError
Uncaught ReferenceError: google is not defined
Remember that you can’t access the “google” object if you didn’t load the Google Maps script before. There are a number of ways to be sure of that:
- Load the Google Maps script before trying to access the “google” object, ensuring that no async or defer attribute has been set on the script.
- Access your “google” object from a function that will be triggered only after the Google Maps script has been downloaded, appending the parameter &callback=yourFunctionName at the end of it, like this:
Failed to load resource: net::ERR_FILE_NOT_FOUND – file://maps.googleapis.com/maps/api/js…
If you are testing your website on localhost, you must either set up a local server, or simply add https: at the beginning of the Google Maps script URL, like this:
If you don’t, your browser will search for the js file on your computer, instead of using http/https protocols.
You don’t have permission to create an API key
If you get this message while trying to generate a new API key, it is usually because you need to create new credentials before proceeding. Just follow these steps:
- Click on the “Credentials” link in the left sidebar
- Click the “Create credentials” button
- Select the “API Key” option
- Click the “Browser key” button from the pop-up
Now you’ll be taken back to the create a browser key step and can proceed without errors.
Google Maps API error: UrlAuthenticationCommonError
See the dedicated article.
I see only a blank space instead of the map, even if no error in showing in the console
Try to completely disable all the minification/caching plugins, if any.