"...highly cost effective."
— Alexander Sawyer What They Say

How to Fix “This page didn’t load Google Maps correctly” Error

Google Maps Oops Something Went Wrong

Are you seeing “This page didn’t load Google Maps correctly” in place of maps on your website? This error has become a lot more common since Google Maps started requiring an API key on June 22, 2016 (after about 10 years of allowing keyless use). If you started using Google Maps on your website on or after that date then you will need to sign up for and implement a free API key (older users still do not need a key).

Google has not made setting up an API key a very user-friendly process. Their interface is geared towards developers. As such, many users have trouble correctly creating a key. This guide is not just for our WordPress theme and plugin users but for anybody on the Internet who wants to know how to fix the “This page didn’t load Google Maps correctly” error on their website.

Find the Cause of “This page didn’t load Google Maps correctly”

First, let’s find out exactly why the “This page didn’t load Google Maps correctly” error is showing. There are multiple things that can cause it but fortunately Google gives us a way to learn the specific reason. This helps us know what to do to fix it. Notice the last part of the error says to open the JavaScript console for “technical details”. That’s what we need.

Oops! Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

You can open the JavaScript console in your browser with a few keystrokes. There is an excellent answer on StackOverflow that tells you plainly how to open the JavaScript console in different browsers. After doing that, you should be able to find an entry looking something like this.

Google Maps Console Error

Listed below are the most common errors reported by our users.

Fix the “This page didn’t load Google Maps correctly” Error

Now that you know exactly what is causing the error, you can fix it. Here are fixes for the most common Google Maps API errors shown in the console.

How to Fix MissingKeyMapError

MissingKeyMapError means you are not using an API key and will need to sign up for one then configure your website to use it. Websites that started using Google Maps on or after June 22, 2016 require an API key in order for maps to show.

Create a Google Maps API Key

Follow these steps to create and implement a free Google Maps API Key.

  1. Start Google’s Get a Key process then log into your Google account (or create one).
  2. Click Agree and continue to create a new project representing your website.
    Google Maps API Register
  3. Under Accept requests, add the two entries below (replacing yourname.com with your own domain). Type the first entry then hit enter on your keyboard to add it. Repeat to add the second entry. Having both entries (with asterisks) will help ensure your maps work on any URL of your website.
    yourname.com/*
    *.yourname.com/*

    Google Maps Create API Key

  4. Click Create then copy your key that is now shown on the screen.
    Google Maps API Key Done
  5. If you’re using our WordPress plugin, go to Settings Church Theme Content and paste your key into the Google Maps API Key field then click Save Changes. Otherwise, do similar according to the product you’re using.
    Google Maps API Key Paste

Note: Google says it can take up to 5 minutes for your key to become active. We’ve heard reports of it taking 30 minutes or longer. Keep this in mind if your maps do not show right away.

How to Fix RefererNotAllowedMapError

RefererNotAllowedMapError is the most common error we’ve seen apart from not using a key. The console will also say, “Your site URL to be authorized”. It relates to Step 3 above when creating your key. Here’s how to fix the error.

  1. Go to https://console.developers.google.com/apis/credentials
  2. Click your API key’s name to edit its settings.
  3. Under Accept requests, make sure you have the two entries below (replacing yourname.com with your own domain). Type the first entry then hit enter on your keyboard to add it. Repeat to add the second entry. Having both entries (with asterisks) will help ensure your maps work on any URL of your website.
    yourname.com/*
    *.yourname.com/*

    Google Maps API Key Referer

  4. Click the Save button then wait a few minutes for the change to take effect (Google says it can take up to 5 minutes).

Tip: If you have multiple projects, make sure you are working with the correct one by using the dropdown at the top-right.

How to Fix ApiNotActivatedMapError

Google Maps has 16 different API’s at the time of writing. Yes, I said sixteen! The Google Maps JavaScript API is the most popular. Whichever API you are using, it’s possible that it is not enabled in your account. Let’s fix the ApiNotActivatedMapError error by enabling the API you’re using.

  1. Go to https://console.developers.google.com/apis/library
  2. Under “Google Maps API’s”, click “More” to see all API’s.
    Google Maps APIs
  3. Click the API you’re using. Our themes use the Google Maps JavaScript API and Google Maps Static API. Your product may use something different but the JavaScript API is most common.
  4. Click the Enable button at the top and wait a few minutes for the changes to take effect (Google says changes can take up to 5 minutes).
    Google Maps Enable API
  5. Repeat for other API’s you’re using (remember, our themes use the Google Maps JavaScript API and Google Maps Static API).

Tip: If you’re using a different product than ours, you may need to enable a different API. If you’re unsure which API to enable, you can try enabling all of them (or ask your provider).

How to Fix InvalidKeyMapError

InvalidKeyMapError simply means the key you implemented is wrong. In other words, you created it but did not enter it into your website correctly.

  1. Go to https://console.developers.google.com/apis/credentials
  2. Copy your key.
    Google Maps API Key
  3. If you’re using our WordPress plugin, go to Settings Church Theme Content and paste your key into the Google Maps API Key field then click Save Changes. Otherwise, do similar according to the product you’re using.
    Google Maps API Key Paste

How to Fix Other Errors

This guide covers the errors we’ve seen most commonly. There are other errors. To learn there causes and how to fix them, see the Google Maps API Error Messages documentation.

It’s Still Not Working

Here are three things to check if you are still seeing the “This page didn’t load Google Maps correctly” error.

  1. Wait five minutes. Google says it can take up to five minutes for the changes to take effect. I have heard that it can take up to 30 minutes in some cases, but give it at least five minutes.
  2. Check the console again. Revisit the section above on identifying the cause of the error. It is possible that you had two errors to begin with but only solved one or that the one error remains because you did not tweak the settings correctly.
  3. Clear your cache. If you’re using a caching plugin, purge it’s cache. Otherwise, your key might not be used right away. It doesn’t hurt to clear your browser cache either.

If you’re one of our customers, please contact us for support and we’ll help get your maps working.

In Conclusion

We hope Google will improve the process of creating an API key now that they have made it a requirement for millions of non-developer users. Until then, I hope this guide will be helpful to many.

If you have any tips to add, please leave a comment…

43 Comments

  1. Hello,
    I have the May 6 trouble, with the page not loading completely. Not the same as the error message. Working with APIs is, at this point beyond me. But I can follow directions. If there is a fix, and you can guide me where to go and tell me what to do, I’d very humbly appreciate it.

    OSX 10.7.5 Safari 6.1.6(7537.78.2)

    Thanks for any reply.

    Google Maps.png

  2. Hi Steven,
    Good information! however, I am getting the following:

    SCRIPTS: Access is denied.
    File: GoogleMapsWebPart.aspx, Line: 1, Column: 1

    any ideas?

    I have added the Google Maps Web Part to my Sharepoint online Site.

    thanks,
    don

  3. Awesome! Thanks! This lead me to the developers site of the wordpress package i purchased and then I added their patch, then added the Google Maps API and Voila! :p

  4. My api works on in the admin console. I’m able to see and manipulate the map. The “Get from Address” button is awesome. On my pages I get a 403 Forbidden Error. From the google developers console I can see successful traffic when in the admin console but no traffic from the live pages. Thoughts?

  5. Thank you, thank you, thank you! It was driving me nuts! In my case, I didn’t have the two different types of wildcard URLs listed.

  6. Just adding my thanks to the mix. Yes, the Dev Console is an ugly thing I can barely navigate – I can’t imagine how ‘non techies’ are dealing with it…

  7. Hi there,
    Actually i am using ‘WpJobus’Theme , please would you please tell me how can i resolve this issue .. ?
    “This page didn’t load Google Maps correctly. See the JavaScript console for technical details.”

  8. in my situation it says:>>>>
    JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js:2:542
    You have included the Google Maps API multiple times on this page. This may cause unexpected errors. js:93:295
    “Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys” util.js:210:33
    “Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

Add a Comment

Your email address will not be published. Required fields are marked *