Fix This Page Didn’t Load Google Maps Correctly

What does the "This page didn't load Google Maps Correctly. See the JavaScript console for technical details." error mean, and how can you fix it? Continue reading to learn everything about this error. 

Google Maps is one of, if not the best, integrated navigation tools; it is available to everyone, no matter what device they use, to help people reach any place they want to go to, with the help of street view, geo-locations, and other advanced feature. This helps people avoid getting lost on the way to someplace new. 

What is the "This page didn't load Google Maps Correctly. See the JavaScript console for technical details." Error? 

With the recent changes made on the application programming interface (API) on Google Maps, many web developers building websites with Google Maps integrated on them have received or are receiving errors about Google Maps not loading correctly, like this error we mentioned. 

If you receive this error, you will not be able to integrate Google Maps on your website for as long as the error persists. 

What causes this error to arise?

This error will occur and pop up on your screen for many reasons, one of which is the lack of an API Key. The lack of an API Key happens due to the recent changes in the Maps API. Anyone who is using Google Maps on their websites from any date prior to June 22^nd of 2016 will not be affected by the changes as per the Maps’ Terms of Use. 

However, anyone using Google Maps API after June 22 will be encountering errors like this error while using Google Maps API with a blank API Key; this is because Google has stopped support for keyless access.

Major changes have been placed on the API and script used for Google Maps; this means that it would be better to check out the API and script for Google Maps before integrating it to your own website.
 

How to Fix "This page didn't load Google Maps Correctly. See the JavaScript console for technical details." Error

Before you fix the error, you need to refer to the JavaScript console to determine what is exactly wrong. Here is how you can open your JavaScript console:

Depending on what your console shows you, you will know the exact error. There are a few error types, as follow:

1. Google Maps API Error: MissingKeyMapError.
2. Google Maps API Error: RefererNotAllowedMapError.
3. Google Maps API Error: ApiNotActivatedMapError
4. Google Maps API Error: InvalidKeyMapError.
5. If your console does not show any of these errors, you can refer to the Google Maps API Error Messages document.

After determining the error type, you can move to the fixes we have prepared for you.

Fix MissingKeyMapError

As mentioned before, starting from June 22, 2016, Google Maps API no longer supported keyless access. The API Key is unique to every user like a fingerprint. To get your key, simply follow these steps:

1. You need to get a new unique API Key; you can do so by clicking here.
    
2. This step depends on the web platform or website service you want to integrate Google Maps on; you can access the script code of the web service you are using on Google Maps. If you are not the direct web developer of your website, it is advised that you reach out to and ask for assistance from the developer or to someone who is an expert; this way you will be able to avoid any potential problems or errors when you try to edit your web service script code in the future. If your website is part of a paid web hosting service, it is best that you reach out to their customer support/technical support team for assistance.
    
3. The final step is to replace the old key (YOUR_API_KEY) with the generated key. You will find this towards the last lines of your JavaScript code.
    
4. Save the code and wait for about five minutes then refresh your page; the error should be gone by now. 

P.S: In some cases, the API Key took up to 30 minutes to become active; please be patient. 

Fix RefererNotAllowedMapError

1. Go to console.developers.google.com/apis/credentials
2. Look for your API key’s name and click on it to edit its settings.
    
3. Under Application restrictions, make sure that “HTTP referrers (web sites)” is selected > add the two entries below (replace yourname.com with your own domain name).

   yourname.com/* | *.yourname.com/* (Both are necessary. Do not forget to append the "/" to the end).
    

4. Click Save and then wait a few minutes. This should take up to five minutes.
    

5. Refresh your page and the error should be gone.
    

Fix ApiNotActivatedMapError

1. Go to console.developers.google.com/apis/library.
    
2. To the right-side of Maps, click on View all to see all APIs.
    
3. Look for the API you’re using and click on it. 
    
4. Click the Enable button at the top and wait a few minutes (up to five minutes) for the changes to take effect and for the error to resolve. 
    
5. Repeat for all the other APIs that you are using.
    
6. Refresh your page and the error should be gone by now.
    

 Fix InvalidKeyMapError

1. Go to console.developers.google.com/apis/credentials.
    
2. Copy your API Key.
    
3. If you’re using our WordPress plugin on your webpage, go to Settings > Church Content > Locations.
    
4. Paste your key into the "Google Maps API Key" field > click Save Changes.
    
5. Wait for a few minutes (up to five minutes) and refresh your page. The error should be gone by now. 
    

How to fix other errors

Enabling your API library will associate it with the current project you are working on, which in turn should fix this error. To enable your API library, follow these steps:

1. Go to console.cloud.google.com.
    
2. Either create a new project or choose the project you are working on from the list.
    
3. Open the APIs & services page ( click on the console left side menu and select APIs & services > select Library).
    
4. Click the API you want to enable. You can search for a certain API.
    
5. Click ENABLE.
    
6. Refresh your page and the error should be gone by then.