Websites of companies often contain a Google Maps preview of their location(s) on the ‘Contact’ page. However, recently, I often saw that on many website, this preview did not show correctly. Instead, it showed a popup error message. This led me to investigate why this happens so often and how I could correct this error.

Google Maps gave this error message:

This page didn’t load Google Maps correctly

Google Maps

Which is followed by the message: ‘do you own this website?’, which links to the Google Maps JavaScript API support page on Error Messages.

Here is what it looks like on both mobile (iOS or Android) and desktop/laptop (Windows, macOS):

Why does this error message appear?

If you own or manage a website yourself, you may be wondering why this error message is showing to you and the other visitors on your website(s). Perhaps it worked fine before, and suddenly people start complaining to you.

The first thing I did was to load the concerned webpage and checking the Console in Google Chrome. You can do the same by right-clicking on the webpage and choosing Inspect. From the new window that appears, select the Console tab. You may need to reload the whole webpage in order for the errors to show properly.

In my case, what I found was that I had 1 error and 2 warnings in the console. Here they are:

You have exceeded your request quota for this API. See https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=billing#api-key-and-billing-errors

_.Uc @ js?sensor=false:52

util.js:226 Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

qx.m @ util.js:226

util.js:226 Google Maps JavaScript API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

It is clear from the error log that for this case, the quota for this API are exceeded. This is good information to proceed with finding a solution for the Maps error you are seeing.

Other common error messages that you may see in the Console may include:

• MissingKeyMapError: There is no API key used
• RefererNotAllowedMapError: Wrong URL for this API key
• ApiNotActivatedMapError: the API key exists, but is not activated (yet)
• InvalidKeyMapError: something wrong with API key (invalid, expired, wrong formatting, …)

Things you can do to fix the Maps error message on your website

The Google Maps worked before on your website

If you website worked before (and suddenly now displays the error message), it is very likely you did not provide any payment/billing information for your Google account. This is a requirement in order to continue to use Google Maps on your domain.

This is what the Google pricing page says about the billing:

When you enable billing, you get $200 free usage every month for Maps, Routes, or Places. Based on the millions of users using our APIs today, most of them can continue to use Google Maps Platform for free with this credit.

Google Cloud billing information

So in conclusion, you can still use Google Maps for free, but once you exceed the 200 USD monthly usage, you will need to pay. And in order for Google to be able to bill you this information, they need your billing information to do so succesfully.

To resolve this situation, head over to the Google Maps Platform Transition Tool. This tool was made by Google to give you an insight in your projects. For each project, you need to take action for each of the yellow triangles. In my case, I had the following message from Google:

This project does not have a billing account. You will need to add billing information for this project to continue to use Google Maps Platform. The first $200 of monthly usage is free.

Project status in the Transition Tool

Add your billing information and the error message should appear (immediately, or after clearing cache/cookies and/or waiting a couple of hours for the changes to take effect).

Google Maps never worked properly / new web project

For new Google Maps implementations on websites, the error message is likely the result of something that you forgot to do or something that was not properly configured.

Let’s take a look which actions you should take to resolve the error message:

MissingKeyMapError

There is no API key used. You absolutely need to request a key on the Google Maps Platform. Click on Get Started and fill in your requirements for your website.

Don’t forget to wait a couple of minutes (up to 15 minutes) in order for the key to become active for you and the Maps preview to show properly.

RefererNotAllowedMapError

Wrong URL for this API key. To solve this specific error, you will need to go to the API keys page. Click on the concerned key, under Application Restriction you add the URL of your website in this format:

example.com/*
*.example.com/*

ApiNotActivatedMapError

The API key exists, but is not activated (yet). Go to API Library page, click on ‘Enable’ for these API’s:

• Maps JavaScript API
• Maps Static API
• Geocoding API

InvalidKeyMapError

Something wrong with API key (invalid, expired, wrong formatting, …). Make sure you used the correct key and it is complete, without extra spaces, or a missing character, .. So go to the Credentials page and correctly copy your Maps key.

Still not working?

If after having followed this above guide, the preview still won’t show, try the following actions:

• Wait a couple more minutes. Often, the API changes take some time to take effect
• Try a different browser
• Clear the cache and cookies of your browser
• Make sure you have correctly copied and pasted all code snippets and keys (just double check)
• Load the page on a different device: smartphone, laptop, tablet
• In Google Maps Platform, start a completely new project and start from scratch