Fix this page didn’t load google maps correctly. (Angular,Divi,etc)

This page didn’t load Google Maps correctly. See the JavaScript console for technical details. If you are facing this same issue with your website then don’t worry I am going to break down, how to fix it.

This error has become more common since Google Maps started requiring an API key. If you started using Google Maps on your website or after June 22nd, 2016 then you will need to sign up for Google Cloud and implement an API key.

I divide this post into several steps you have to follow all the required steps in order to fix the “This page didn’t load Google Maps correctly. See the javascript console for technical details.” issue.

Step: 1

Why “This page didn’t load Google Maps correctly. See the JavaScript console for technical details.” error occurred.

The most common reason is you are not using APIs but it’s not the cause for all of you that’s why we together first get the particular reason why this error occurred. To get the reason you have to follow these steps.

1. As the error says, “See the JavaScript console for technical details.”
2. Open JavaScript console.

3. If your console looks the same as in the below image then your error is MissingKeyMapError.

4. If your console looks the same as in the below image then your error is RefererNotAllowedMapError.

5. If your console looks the same as in the below image then your error is ApiNotActivatedMapError.

6. If your console looks the same as in the below image then your error is InvalidKeyMapError.

7. If your console does not match any of our errors then you have to see the Google Maps API Error Messages documentation.

Go to step 2 and fix your particular error.

Step: 2

Fix “This page didn’t load Google Maps correctly. See the JavaScript console for technical details.” error.

https://www.youtube.com/watch?v=t7mHBK_uY3U

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.

Follow these steps in order to fix MissingKeyMapError.

1. Go to the Google Maps Platform.
2. Click Get Started.

3. Google will ask you for some information. If it asks you to create a project, go ahead and do that (no worries if not). You must add a payment method even though Google gives you a very large amount of free credits every month. To date, none of our customers have reported needing to pay anything for Google Maps.
4. You will then be asked to choose products. Choose Maps then click Enable then answer the short survey.

5. API key will be generated and shown. Copy it to your clipboard with the button on the right then click on “Done”.

6. Go to Geolocation API then click Enable.

7. Now click on Credentials from the menu.

8. Click your “Maps API Key” and select HTTP referrers under Application restrictions.

9. Under Website restrictions, use ADD AN ITEM twice to add the two entries below (replacing yourname.com with your own domain).

yourname.com/*
*.yourname.com/*

11. Click Save at the bottom and you’re done.
12. Use your API key that you copied in step 5.

How to Fix RefererNotAllowedMapError

RefererNotAllowedMapError is the most common error we’ve seen apart from not using an API key. The console will also say, “Your site URL to be authorized”.

Follow these steps in order to fix RefererNotAllowedMapError.

1. Go to https://console.developers.google.com/apis/credentials
2. Click your API key’s name to edit its settings.
3. Under Application restrictions, make sure “HTTP referrers (web sites)” is selected and that you have added the two entries below (replacing yourname.com with your own domain). Both are necessary and be sure that have you appended /* to the end.

yourname.com/*
*.yourname.com/*

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.

How to Fix ApiNotActivatedMapError

Google Maps has more than a dozen different APIs. That’s a lot! 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.

Follow these steps in order to fix ApiNotActivatedMapError.

1. Go to https://console.developers.google.com/apis/library
2. Search for APIs that you are using.

3. Click the API you’re using.

3. Click the Enable button at the top.

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.

Follow these steps in order to fix InvalidKeyMapError.

1. Go to https://console.developers.google.com/apis/credentials
2. Copy your key.

3. Past your Key.

How to Fix Other Errors

As I already mentioned, I recommend you to see the Google Maps API Error Messages documentation.

It’s Still Not Working

Here are some points you have 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.
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.