Fix This Page Didn’t Load Google Maps Correctly
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 causes this error to arise?
- Fix MissingKeyMapError
- Fix RefererNotAllowedMapError
- Fix ApiNotActivatedMapError
- Fix InvalidKeyMapError
- How to fix other errors
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?
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.
Windows and Linus: Ctrl + Shift + J
Mac OS: CMD + Opt + J
CMD + Opt + C
Windows and Linus: Ctrl + Shift + K
Mac OS: CMD + Opt + K
Depending on what your console shows you, you will know the exact error. There are a few error types, as follow:
- Google Maps API Error: MissingKeyMapError.
- Google Maps API Error: RefererNotAllowedMapError.
- Google Maps API Error: ApiNotActivatedMapError
- Google Maps API Error: InvalidKeyMapError.
- 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.
According to Google developers, "Google Maps Platform products are secured from unauthorized use by restricting API calls to those that provide proper authentication credentials. These credentials are in the form of an API key - a unique alphanumeric string that associates your Google billing account with your project, and with the specific API or SDK."
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:
- You need to get a new unique API Key; you can do so by clicking here.
- 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.
- 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.
The premium plan (Premium Cloud API) grants users higher volume than the regular (free) maximum limit of map load.
- Go to console.developers.google.com/apis/credentials
- Look for your API key’s name and click on it to edit its settings.
- 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).
Click Save and then wait a few minutes. This should take up to five minutes.
Refresh your page and the error should be gone.
- Go to console.developers.google.com/apis/library.
- To the right-side of Maps, click on View all to see all APIs.
- Look for the API you’re using and click on it.
- 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.
- Repeat for all the other APIs that you are using.
- Refresh your page and the error should be gone by now.
- Go to console.developers.google.com/apis/credentials.
- Copy your API Key.
- If you’re using our WordPress plugin on your webpage, go to Settings > Church Content > Locations.
- Paste your key into the "Google Maps API Key" field > click Save Changes.
- 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:
- Go to console.cloud.google.com.
- Either create a new project or choose the project you are working on from the list.
- Open the APIs & services page ( click on the console left side menu and select APIs & services > select Library).
- Click the API you want to enable. You can search for a certain API.
- Click ENABLE.
- Refresh your page and the error should be gone by then.