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 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.

They do this by providing users with a $200 credit/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.

1. 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.

When asked which features you want, Tick Maps.

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.

2. Get a Google API Key

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

the 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 page should list all the keys you have in a table

3. Provide your API Key to the Map

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.