This error occurs due to constant changes in the Google Maps API and the good news is, the problem can be fixed.

“This Page Can’t Load Google Maps Correctly” (For development purposes only)

During debugging, we found that the error was due to the Google Maps API usage limit. Google was permitting the deployment of its maps free of cost to most of the website users. Users used to get a $300 credit to use for the first year and $200 of free usage per month, in the subsequent years. This credit was prorated based on $200 divided into 30 days ($200/30 = $6.67 per day) and it resets every day for each API. However, this estimation was ineffective for most of the map users.

We found the following information on the Google website:

“On July 16, 2018, a new pay-as-you-go pricing plan went into effect for Maps, Routes, and Places. This new plan gives you more flexibility and control over how you use our APIs: You can use as much or as little as you need and only pay for what you use each month. We would also like to highlight that we’ve changed the pricing for our Maps, Routes, and Places products. For more information on what’s changing, You can review the API-specific billing changes and the guide to Understanding Billing. You can also estimate your monthly bill with the pricing calculator.”

To fix this issue, you need to follow the instructions given below:

The link in the error box on the website will take you the page where you can fix your map. You can also visit here https://cloud.google.com/maps-platform/ to proceed.

Once you’re there, click the “Get Started” button on the top-right corner of the screen and a pop-up will appear as mentioned below. Select “Maps” and click the “Continue” button.

Next, you will have to select or create a project by selecting the relevant option from the box.

You will have to enable billing for the project by creating a billing account.

If you are a new user, you will need to key-in your credit card details and in case you already have an account with Google with your credit/debit card details for making payments, you won’t need to furnish any details.

After the API key setup, here are additional steps for the security of your API key:

Click the “HTTP referrers” button and it will lead Google to allow your API to be used on a particular website.

Type your website url in the blank text box.

Note: If your website is not secure, it won’t let you use https and you will need to use http in the URL.

Your API is secured once you click the “Save” button

Following these steps, you can fix the problem.

Do share this article with your friends if you find it useful!

Thank You!

If you have any queries or doubts about this topic please feel free to contact us. We are here to help you!