Google Maps Error: The page can’t load Google Maps correctly
Google has recently made some policy changes to its maps. Using the Google Maps share function, or Google My Maps embed function would cause problems if you used another product or got something custom.
You can still have a map embedded into your website, but now you need to set up an account with Google Cloud, which requires your contact information and, most importantly, Credit Card details.
Don't worry, as they won't charge you for anything unless you
have over 20,000 people viewing your
Map each month.
If you don't create an account and provide your maps with the unique Google API that your account creation generated, you will encounter the 'For Development Purposes Only' error.
With that explained, here is a step-by-step instruction, solving 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.
Feel free to create one and name it whatever you like regarding' the Project.' It's a feature designed for organizations that use multiple google products for numerous projects like web and map builders.
If you followed the link provided in step one, it would generate an API Key at the end of the prompts, which you can copy. If you already have a Google Cloud Account, you can still follow the previous link, and it will skip through most of tthe prompts to generate a new key.
If you missed the popup or thought you had a key in the past, you can find your existing API Keys by going to the Google Cloud Platform Side Bar -> 'APIs & Services' ->' Credentials.
This step will vary quite a bit depending on how exactly your Map was embedded but will almost always require you to go to the backend of your website, be it WordPress or something else like Wix.
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>
Once the key is inserted and the page is saved, the Map should no longer show the "For Development Purposes Only" Error.
Related Articles
Google Maps Error: The page can’t load Google Maps correctly
Solving Google Maps ‘For Development Purposes Only’ Error Google has recently made some policy changes to its maps. Using the Google Maps share function, or Google My Maps embed function would cause problems if you used another product or got ...How to make Google Maps API?
1. Click on https://console.cloud.google.com 2. Select your projects and create new project. 3. Click on the hamburger navigation icon on the left corner and select APIs and Services. 4. Then, Click on Enable API and Services 5. Then, select Maps ...How to make Google Maps API?
1. Click on https://console.cloud.google.com 2. Select your projects and create new project. 3. Click on the hamburger navigation icon on the left corner and select APIs and Services. 4. Then, Click on Enable API and Services 5. Then, select Maps ...How to know Google Maps API usage?
Go to the app setting. Click on the Map Provider. then you can find out Google Maps API at the bottom of Your Map Provider option.How to know Google Maps API usage?
Go to the app setting. Click on the Map Provider. then you can find out Google Maps API at the bottom of Your Map Provider option.