The error looks like this:
This error frequently happens when you put Google Maps on your website with the wrong configurations.
First, you need to open the console from your browser.
If you are using Google Chrome, the shortcuts for opening the console are as follows:
- Windows and Linux:
Ctrl + Shift + J
- Mac OS:
Cmd + Opt + J
If you are using Firefox, use the following shortcuts:
Ctrl + Shift + K
- Mac OS:
Cmd + Opt + K
Here’s an example of the error:
This tutorial shows the most common Google Maps error you may get and how to fix them:
MissingKeyMapError means that the script element that loads the API is missing the required
To fix this error, you need to find the
<script> tag that loads your Google Maps.
The script should look as follows:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>
As you can see, there’s the
key parameter in the script above with the value of
You need to replace
YOUR_API_KEY with the actual API key that you get from Google cloud platform console.
Go to Google Maps Platform page and click on Get started button. You need to create a Google account if you didn’t have one already.
Next, enable the Maps API as shown below:
Once enabled, you should see a new API key displayed on your screen as follows:
Copy the Google API key above and replace the
YOUR_API_KEY value with it.
Finally, refresh the browser and you should see Google Maps being displayed without any error.
To prevent others from using your key, you need to set up a restriction.
When you click on the GO TO GOOGLE MAPS PLATFORM button above, you should see a window that says Protect your API key. This is where you need to restrict your key access:
Select HTTP referrers for the restriction type, then enter your domain name in the Referrer column.
The format should be as follows:
Finally, click RESTRICT KEY and you’re done!
RefererNotAllowedMapError happens when the URL loading the Maps API has not been added to the list of allowed referrers.
This can happen when you have a typo in your restriction settings.
To fix this, you need to access the Credentials menu on your Google developers console, then select your API key.
See if the restriction is correct as shown below:
ApiNotActivatedMapError occurs when your Maps API has not been activated yet.
You need to activate the API from the Google Maps Platform page.
InvalidKeyMapError happens when the
key you put in your
<script> tag is invalid.
Make sure you are using a valid API key to solve this issue.
Solve other errors
If you see an error that’s not listed in this tutorial, then you can look into Google Maps API error messages page and search for your error code there.
The Maps API has over a dozen error code, so the documentation will be helpful.
To conclude, the Google Maps API error “This page didn’t load Google Maps correctly” can be caused by a variety of issues such as a missing or invalid API key, an API that has not been activated, or incorrect restriction settings.
It’s also important to set up restrictions on your API key to prevent unauthorized access.
By following these steps, you should be able to successfully add the Google Maps API to your website and display the map without any issues.