Categorie

Pubblicato il in How-To and Troubleshooting | 125 commenti

Google Maps API error: MissingKeyMapError [SOLVED]

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.

Contents

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.

If you are using the Google Maps API on localhost or your domain was not active prior to June 22nd, 2016, it will require a key going forward. To fix this problem, please see the Google Maps APIs documentation to get a key and add it to your application: https://developers.google.com/maps/documentation/javascript/get-api-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:

Google Maps APIs - Get a key

Google Maps APIs – Get a key

2. Select an existing project (or make a new one), agree with the terms and click on Enable API:

Google Maps API - Enable javascript API

Google Maps API – Enable javascript 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):

Google Maps API - Copy the generated key

Google Maps API – Copy the generated key

4. Locate the file that contains the Google Maps script code on your website, and append your API key to it as a parameter:

<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async="" defer="defer" type="text/javascript"></script>

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:

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=YOUR_API_KEY" async="" defer="defer" type="text/javascript"></script>

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

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:

Google Maps API - Manage the API keys

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

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:
    <script src="//maps.googleapis.com/maps/api/js?key=7rY1zJOKlz4PrRKP23as&callback=yourFunctionName" async="" defer="defer" type="text/javascript"></script>

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:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async="" defer="defer" type="text/javascript"></script>

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.

125 Comments

Post a Reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Indica su quali commenti vuoi essere aggiornato via email. Puoi anche iscriverti ai commenti senza commentare.

  1. Thanks for this my friend. Really helpful implementation guide.

  2. I don't have any maps on my site why do I get the following errors

    Google Maps API error: MissingKeyMapError

    Google Maps API warning: NoApiKeys

    Google Maps API warning: SensorNotRequired

    • Maybe the theme you are using do include some Google Maps support, even if you didn’t any map anywhere.

  3. Really helped! I've installed the plugin and BOOM, it worked! Thanks for sharing.

  4. Really weird, I'm using Linux (Ubuntu Mate 16.04), 1280×800 resolution. Which screen resolution are you using? Thank you!

    • It works on the aforementioned systems regardless the windows size or screen proportions… Obviously, I'm talking about the online website which I tested, not the local one which I can't…

      Try to send the link to some of your friends (not devs) and see if they tell you that it works or not.

      On your particular enviroment you could have some plugins or stuff that prevent maps from showing correctly, or some browser caching issue…

      • 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.

        • Confirmed, I’m accessing it from Italy, using Chrome browser (last version, no plugins) on Windows, Linux and Android.

          I’m really curious to know what is causing this weird issue… let me know! Good luck 😉

          EDIT: On Firefox it isn’t working, it seems.

          • 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 🙂

  5. P.S.: I'm testing the WordPress site locally and by the way, I'm using the Frost theme, in case that's important.

    • Did you try to disable any minify/caching plugin completely? If not, try and see if it gets fixed then.

      Could you also provide a link to the mentioned page?

      • Hi Emanuele, thanks for your quick answer.

        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/

        • I can see the map regulary, at the moment… it seems that the problem was caused by the caching plugin (try to test it yourself after clearing all your browser data).

          This is not the first case in which I’ve seen this behaviour, that’s why I suggested you to try that.

          If you don’t want to keep your caching plugin completely disabled, try to disable only the css/javascript minification and see if it works.

          • 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

          • Tested on Android, Windows PC and Linux PC and it works:
            http://pasteboard.co/bmSNQ40WF.png

  6. Hi all,

    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.

    Thank you!

  7. still doesn't work
    but I really appreciate your help

    Thanks Emanuele

    • Sorry, I forgot to clear the cache after changing the script… now it's working!

      Thanks Emanuele, you are awesome!

  8. Hi, this is great article, but i'm still having the "Oops" problem in my wordpress site http://bayuandnisa.com/pages/location using theme.

    i've already installed the "API key for google map" plugin

    the only similar script that i found is
    var key = window.WPV_FRONT && window.WPV_FRONT.gmap_api_key ? '&key=' + WPV_FRONT.gmap_api_key : '';

    $.getScript(location.protocol + '//maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=' + cb + key);
    return this;

    in a file called jquery.gmap.js

    please i need your guidance

    • Try to edit the file all.min.js in the path /wp-content/themes/the-wedding-day/vamtam/assets/js/, replacing the code:

      a.getScript(location.protocol+"//maps.googleapis.com/maps/api/js?v=3&sensor=false

      with the code:
      a.getScript(location.protocol+"//maps.googleapis.com/maps/api/js?v=3&key=YOUR_API_KEY&sensor=false

      where YOUR_API_KEY is your actual api key.

      Let me know if it works.

      • thanks for the reply,

        I have changed it but still have the same problem.
        The rest of the code remains the same?

        • Ok, I've got it. Put the code back as it was before. Your theme (The Wedding Day) supports API keys natively. Just open your admin panel, go into General Settings > General Settings Tab > Google Maps API Key field and paste your Maps API key there.

          Reference/tutorial available here: http://goo.gl/SM82sG

          • its for the updated version, but mine is older didn't have that field setting

          • Try to edit again the file all.min.js, this time replacing the code:

            var a.getScript(location.protocol+"//maps.googleapis.com/maps/api/js?v=3&sensor=false&callback="+f+g)

            with this one:
            a.getScript(location.protocol+"//maps.googleapis.com/maps/api/js?v=3&sensor=false&callback="+f+"&key=YOUR_API_KEY")

            where YOUR_API_KEY is your actual api key.

            Remember to empty your browser cache (or just open an incognito tab), in order to see the changes in action!

            If it still doesn't work, I'm afraid I can't help you, and you should either ask to the theme developers or update the plugin to the latest version.

            Cheers.

  9. What if we change the domain name afterward ? Do we need to create a new API or not ?

    • You must add the new domain to the allowed websites list for that API key.

  10. Would really appreciate your help. I have tried to update the code with the new key. I am just getting a blank space where the map should be. Any pointers?

    http://www.quaynoodle.com/preview/location.html

    • I see from the browser console that you are getting the following errors:

      – Google Maps API error: RefererNotAllowedMapError
      – Uncaught ReferenceError: google is not defined

      Both of them are listed on the troubleshooting section above, so refer to it for fixing them!

Pin It on Pinterest

Shares

Condividi: