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.

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?

Don’t panic!

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

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:

Google Maps API – Manage the API keys

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:

Google Maps API – Restrict the key usage

Troubleshooting

Here there are some common errors you may encounter in your browser console during the API key integration process.

Google Maps API error: RefererNotAllowedMapError

You get this error when the current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers.

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

You get this error if Google Maps JavaScript API is not activated on your API project. Just enable it under APIs in the Google API Console.

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:

The people I've sent the link to can't see the map, only the grey box, regardless they are in Portugal or abroad. By the way, can you confirm me that you are accessing from Italy, or elsewhere? Apart from a DNS server issue, I really don't know what is happening, but once I clarify this situation I will let you know.

Hi, sorry for the late, late reply. Meanwhile (like 1 week after) the map started appearing as it should, regardless of the browser. The reason for this was that the address of the map was changed (more precisely, simplified) and this turned out to be the solution. However, it doesn't explain 1) why it worked before changing the address and suddenly stopped working 2) Why you could see it before anyone else (including friends also abroad Portugal). Thank you so much for the support & all the info, nevertheless!

Thank you for your update, João! It looks it could have been a DNS propagation issue (abroad DNS sometimes get updated sooner than others, because not cached yet there). I’m really happy to know that it is solved now 🙂

Regarding the WP Fastest Cache plugin, I always hit the "Delete Cache and Minified/JS" option before testing the site, nevertheless I deactivated the plugin. Still, the map doesn't appear, only a blank space instead. You can access it here: www.pikas.pt/

This is really weird, I just cleared completely the browser history (like I always do!), opened the site in an incognito tab and still the map doesn't appear (I even tried from my tablet/iPhone, it doesn't show anywhere!). See it for yourself: http://pasteboard.co/bmAKCOOR7.png

First of all, thanks for this great article. Suddenly, some days ago I started getting the "Oops…" error on the WordPress site I'm working on (I was getting 2 warnings and the MissingKeyMapError on the console), and after creating the API key and adding it (either manually in the code or by using the API KEY for Google Maps plugin), MissingKeyMapError went away, and the "Oops" has changed to a blank area, instead of the map. So, I don't have any errors or warnings in my browser console anymore, at this moment. Nevertheless, I'm in this situation for days and can't seem to make the map appear again. I am trying to use the API keys and I'm always flushing both the browser cache and the WP Fastest Cache plugin cache (which my site uses), with no result. Tried the "trick" of inserting "*" into the "Accept requests from these HTTP referrers (websites)" field, also tried with this field empty, with no success. I've created like a dozen of projects/keys in the last couple of days, if you could help me it would be of great value, because I don't know what else can I do.

Hi! i have Jommla web site and i have a same problem "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details." I'm using Huge It google maps plugin please help to solve that!

I'd recommend you to use a different key – from a different project – for your localhost enviroment(s).

Also, it would bring some nice benefits: – You won't be wasting any of your 25,000 daily pageviews – Nobody could harm your business wasting all the quota for you from his localhost enviroment (who knows which kind of bad guys you can find out there…)

I too got the same issue but the support team guided me and cleared the issue. Resolve your issue by following the procedure given here https://jomclassifieds.com/forum/general-discussions/2507-map-loading-issue.html Thanks Jom Classifieds Team!

Hi, I am using Jom Classifieds Script for my classifieds website. With Google Map Integration, I receive a grey background and I don't know how to make the map work. Please help me. This dialog box on grey has been displayed for every map from now, it makes my site bad! Any help / advice is highly appreciated!!

After much research I found a way to solve , if the site is wordpress , you simply install the plugin " API KEY for Google Maps" then go to SETTINGS and enter the API created in google site (https://developers.google.com/maps/documentation/javascript/get-api-key) For me decided . And according to the google site , that started from June 22, 2016 , and only occurs in new areas . I hope this tip helps someone else.

Unfortunately it doesn't work for me. I'm not able to make it work. I always get a blank/white space. I tried different Keys (one with website and another with asterisk). None of them work. Neither on localhost or online on my server. Waited 30 mintues to make sure the key getting active, which didn't changed anything. Always with the same result (blank/white space). Do you have any hint?

I think you should remove both "async" and "defer" from line 174, because if your script fires before Google maps is loaded, it can't find any "google" function (in fact, your console says: "Uncaught ReferenceError: google is not defined").

This seems to work, but only on the server. I'm not able to make it work locally. When I add "http:" to the src I get the "OOps,…" message again. Console is telling "Google Maps API error: RefererNotAllowedMapError …"

However, the callback option is not the best way. what if I have multiple maps on the page with different functions?

That is another kind of error: referer not allowed means that you set only your online website as allowed address for you API key, when generating it.

Just make another key, and put an asterisk in the allowed websites field, and it will work everywhere.

If you plan to have multiple maps with multiple functions, you can do in two ways:

– Remove defer and async from the maps script, and put that script before the functions (performance wise, this is not the best solution). – Create another function, let's say "initAllFunctions", in which you call all the others, in a row.

If you care much about performances, go with the first, if you prefer not having to update the "initAllFunctions" everytime you add a new function, go with the second.

I had the same problem. The solution was to de- and reactivate the Google Maps JavaScript API (you probably have to reload the API Manager page to reactivate the API). Now I have 6(!) active APIs (Google Maps Directions API, Google Maps Distance Matrix API, Google Maps Elevation API, Google Maps Geocoding API, Google Maps JavaScript API, Google Places API Web Service) and it works like a charm. I hope this will help you.

I'm not really sure regarding the limit, because Google says "your site or application", and use both the terms in different statements (see here for example: https://developers.google.com/maps/documentation/static-maps/usage-limits), so it could be both of them (even if I personally think that the limit is on a key-basis). But I don't recommend you to use the same key for all your customers websites: is there any particular reason why you want to do that?

You can generate as many key as you need, for free… So, my personal advice is to make a key for your development stage (that you could label 'Development key), that will be the only one allowed to run on any website (* wildcard), and then to make a key for each production website, allowed to run ONLY on that specific domain.

This is for a number of reasons: – The risk of exceeding the usage limit is significantly lower – Nobody will be able to use your key on other domains (who knows why would he be willing to do that? Maybe just to harm yours) – It doesn't costs you anything

Hi. "I don't recommend you to use the same key for all your customers websites: is there any particular reason why you want to do that?" RE: The reason is I'm lazy 🙂 I did not want to login to my google account and create a new key every time I get a new customer.

But you are correct. Your suggestion it the way to go and I will follow those recommendations!

One question I have, that your how to does not cover, I guess because its not necessary, it this option in the console: https://console.developers.google.com/apis/credentials/domainverification

Ok, I think I got it. It should be related to what Corrado said. Try to make a new API key, but this time put an * in the referrers field, instead of leaving it blank. It should work then (just wait some minutes for the key to be active).

Sorry but I had to remove your huge js code because this discussion is going to be too spammy for other users…

Your issue is totally different from the one presented in this article, so – to not go off topic and lead astray everywone – you'd better ask on Stack Overflow! You'll find a really better support there 🙂

I want to deactivate the mappress plugin because the theme(Classipress) I am using already had a google maps feature. I've searched long and hard through files and code just looking for keywords like API haha(because I'm desperate at this point). I managed to find some bit of code similar to that I'm meant to replace in public_html/wp/wp-content/themes/classipress/includes/enqueue.php. this is a screenshot of the code http://oi66.tinypic.com/33b0o51.jpg

Ok Bob, I think you have found the exact piece of code that you must change!

Just change the highlighted code: //maps.googleapis.com/maps/api/js

into: //maps.googleapis.com/maps/api/js?key=YOUR_API_KEY

Replacing YOUR_API_KEY with the actual API key value (you can get an API key following the tutorial above). It should work then, anyway you should point out the problem to your theme developer, in order to have this fixed in the next updates (otherwise, you will have to edit your theme file after each update).

Anyway, it is really weird… are you sure that it wasn't due to the fact that the key needed 5 minutes before being activated? From what Google said, it seems that if you leave the field blank it should accept request from every referrer!

I did everything you said but for some reason its not working. I still get this: "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details."

I was experiencing the same issue with Mappress plugin and, after cracking my head trying to find a solution not touching the code, I came out with the point of it all, the fix is the easiest we can imagine:

In the Mappress settings area, there is a field "Directions server – Enter a google server URL for directions/printing" which is set "https://maps.google.com". That's the problem.

It should be "https://maps.googleapis.com". Otherwise we will get the "Oops!" error. Changing this setting to "https://maps.googleapis.com" solves the issue, and the maps are up and running.

I am trying to use a plugin called mappress easy Google maps. Ineedbooks.co.za is my URL. It's a classifieds ad website, I want users address to be viewed on Google maps. Bare with me as I'm a beginner, it's my first website.