When you add a Google Maps API to your website, you may see an error saying that “This page didn’t load Google Maps correctly. See the JavaScript console for technical details.”
The error looks like this:
This error frequently happens when you put Google Maps on your website with the wrong configurations.
To solve this error, you need to look at the JavaScript console on your browser as instructed by the screen.
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:
- Windows:
Ctrl + Shift + K - Mac OS:
Cmd + Opt + K
Once you open the console, you need to see the technical details related to your Google Maps JavaScript API.
Here’s an example of the error:
This tutorial shows the most common Google Maps error you may get and how to fix them:
Solve MissingKeyMapError
The MissingKeyMapError means that the script element that loads the API is missing the required key parameter.
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 YOUR_API_KEY.
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.
The API key for Google Maps is visible from your browser, so anyone who knows how to open the JavaScript console can see your key.
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:
*.domain.com/*
Finally, click RESTRICT KEY and you’re done!
Solve RefererNotAllowedMapError
The 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:
Solve ApiNotActivatedMapError
The ApiNotActivatedMapError occurs when your Maps API has not been activated yet.
You need to activate the API from the Google Maps Platform page.
Solve InvalidKeyMapError
The 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.
Conclusion
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.
To fix these errors, you can use the JavaScript console on your browser to find the error message, then follow the steps outlined in this article to resolve the issue.
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.