Fixing Google Map Errors

You may have noticed that a recent update has left Google map errors on your website with messages stating “This page can’t load Google Maps correctly.” & “For development purposes only” being displayed over the Google map window.

Google Map Errors

What has caused the Google Map errors?

On July 16th 2018 a new pricing policy was introduced with a charge applied per map load / view. If your map isn’t using an API attached to an account with an active billing method present then the error message will be displayed.

Whilst this may provoke thoughts of ‘how much is this going to cost me?’, the reality is unless your map is going to be accessed more than 400-500 times per day you will not encounter charges. Google provide a monthly credit of $200 which is more than adequate for a small to medium sized business. If you are worried about going beyond this limit, it is possible to apply a cap to the number of map loads per day.

Check whether an API is in place

The first step in determining the cause of Google Map errors is to check that an API is in place. A handy tool is Google’s Chrome plug-in: Google Maps Platform API Checker. Once activated simply navigate to the page where your Google Map is located and use the tool tip. You will be notified whether an API is in place or whether an error is present…

Google Maps Platform API Checker

Creating a Google Maps API

I am going to fix the Google Maps error by starting afresh and creating a new API. First you’ll need to visit the Google Maps Platform and select ‘Get Started’.

In the new window you should select the ‘Maps’, ‘Routes’ and ‘Places’ options then click Continue.

Google Maps Platform

You will now need to choose an existing project or create a new one.

Google Maps Errors

On the page that loads you will need to assign a billing profile. Once completed you can now enable your APIs.

Google Maps API

Applying a purchase cap

If you wish to ensure that you are not billed for your Google Map use you may wish to implement a purchase cap…

Go to the Maps JavaScript API Quotas page in the Google Cloud Platform Console.

From the projects list, select a project.

In the Requests section, on the Requests per day line, click the edit icon, then enter the preferred total billable daily quota, up to the limit (if any) specified by Google.

Applying Google Maps Useage Caps

It’s worth remembering that if the API use reaches your assigned limits, your application will not be able to function until the quotas are reset the following day.

Activating your map

Finally, once you have applied your new API key to your project you will find the error message has gone…

Google Maps Error fixed

Clook Logo

Get regular tips, tricks and updates!

Signup today for our awesome newsletter and recieve monthly emails with all sorts of helpful articles on hosting and web development.