Google Maps Error: The page can’t load Google Maps correctly
Google has recently updated its Maps policies. Using the Google Maps Share function or Google My Maps embed may cause issues when integrating with other products or custom solutions.
You can still embed a map on your website, but you now need a Google Cloud account, which requires your contact information and a valid credit card.
Don’t worry — Google won’t charge you unless your map receives more than 20,000 views per month.
If you do not create a Google Cloud account and use the unique API key generated for your account, your map will display the ‘For Development Purposes Only’ error.
With that explained, follow these step-by-step instructions to resolve the ‘For Development Purposes Only’ error.
- Create a Google Cloud Account
The easiest way to do this is through Google's webpage linked here. Just click on
'Get Started' and follow the
prompts.
You can create a project and give it any name you prefer. This feature is useful for organizations managing multiple Google products across different projects, such as web development and map integration.
If you followed the link in step one, an API Key will be generated at the end of the prompts — you can copy this key. If you already have a Google Cloud account, following the same link will skip most prompts and allow you to generate a new key quickly.
If you missed the popup or already have an API key, you can find your existing keys by navigating to Google Cloud Platform > APIs & Services > Credentials in the sidebar.
This step may vary depending on how your map is embedded, but it generally requires accessing the backend of your website, whether it’s WordPress, Wix, or another platform.
Once you are there, you will either need to find the plugin managing your maps and look for the section asking for the API key or if you don't have a plugin go to the page with the Map and look for the HTML code holding the Map.
Assuming you are using some HTML
there will be a section in the code that has <script src=
"http://somemapprodcutaddress.js">
</script> or some variant. Typically, there is a lot more what we
call 'tags' than just an src=, for instance, width=
or text=.
You need to find the key= or googleapikey= and
copy/paste the API key you got before right after it.
If the tag is not there, you will need to add it. So, for instance:
<script src=“http://somemapprodcutaddress.js”> </script>
Would become:
<script src=“http://somemapprodcutaddress.js” key=“yourapikey”> </script>
After inserting the API key and saving the page, the map should display correctly and the ‘For Development Purposes Only’ error will be resolved.
Related Articles
Google Maps Error: The page can’t load Google Maps correctly
How to Fix the Google Maps ‘For Development Purposes Only’ Error Google has recently updated its Maps policies. Using the Google Maps Share function or Google My Maps embed may cause issues when integrating with other products or custom solutions. ...How to make Google Maps API?
1. Open the Google Cloud Console. 2. Select an existing project, or click Create Project to set up a new one. 3. Click the menu (☰) icon in the top-left corner, then select APIs & Services. 4. Next, click Enable APIs & Services at the top of the ...How to make Google Maps API?
1. Open the Google Cloud Console. 2. Select an existing project, or click Create Project to set up a new one. 3. Click the menu (☰) icon in the top-left corner, then select APIs & Services. 4. Next, click Enable APIs & Services at the top of the ...How to know Google Maps API usage?
Go to App Settings. Click on Map Provider. Scroll to the bottom of the Map Provider section to find your Google Maps API key.How to know Google Maps API usage?
Go to App Settings. Click on Map Provider. Scroll to the bottom of the Map Provider section to find your Google Maps API key.