Ditch Microsoft & Google Today!

Load Google Maps Correctly: 5 Easy Fixes for the API Key Error

If your website shows the message “This page can’t load Google Maps correctly,” your map is failing because Google is rejecting the request your page sends. The fix is usually quick once you know which of a few causes applies. Here is how to find out and fix it.

Why this page can’t load Google Maps correctly

A map on your site calls Google through an API key. If the key is missing, wrong, blocked or not connected to billing, Google replaces the map with a dimmed picture and this message. Often the words “For development purposes only” are stamped across it.

Step 1: Read the exact error

Open the page, right-click and choose Inspect, then open the Console tab. Look for a red message that mentions Google Maps JavaScript API. The error code tells you what to fix. The full list is in Google’s error message reference.

Step 2: Match the code to the fix

  • MissingKeyMapError: no API key was added. Create a key in Google Cloud and paste it into your map plugin or theme settings.
  • InvalidKeyMapError: the key was typed wrong or deleted. Copy it again.
  • ApiNotActivatedMapError: the Maps JavaScript API is not turned on for the project. Enable it in your Google Cloud project.
  • BillingNotEnabledMapError: the project has no billing account. Add one. Google includes a monthly free usage allowance for most small sites.
  • RefererNotAllowedMapError: the key is restricted to certain websites and yours is not on the list. Add your domain, with and without www, to the allowed referrers.

Step 3: Save and test

Clear your site cache and reload the page. Changes to a key can take a few minutes to apply. If you use a caching plugin on WordPress, clear it first.

The easier option: embed a map without a key

  1. Open Google Maps and search for your business address.
  2. Choose Share, then Embed a map.
  3. Copy the iframe code.
  4. Paste it into a custom HTML block or widget on your page.

This avoids the “this page can’t load Google Maps correctly” error entirely. It works for a simple “find us” map and needs no API key or billing setup.

Still stuck with “this page can’t load Google Maps correctly”?

If your map plugin, theme or site builder keeps failing, talk to our team. If you are building a new site, our website builder includes simple map and contact sections.

Fix it in WordPress and page builders

If you use WordPress, the key usually lives in one of three places: your theme settings, a map or contact form plugin, or a page builder widget. Open the setting that mentions Google Maps or API key, paste the key, save, then clear any cache. If you cannot find where the key was entered, search your plugin list for anything map related.

Create a new Google Maps API key safely

  1. Sign in to Google Cloud and create or select a project.
  2. Turn on the Maps JavaScript API for that project.
  3. Create an API key under Credentials.
  4. Restrict the key to your website addresses so no one else can use it.
  5. Make sure the project has an active billing account.

Restricting the key is important. An open key can be copied and used by others, which could use up your allowance.

Why a key can stop working after it used to work

A map that worked for months can break suddenly. The usual causes are a billing account that lapsed, a key someone deleted or regenerated, a change to the allowed websites list, or a new domain or www version that was not added to the restrictions. If you load Google Maps correctly on one version of your address but not another, check the referrer list first.

Make sure maps do not slow your page

A map can add weight to a page. Load it only on the page that needs it, such as your contact page, and consider showing a simple static image that opens the map when clicked. A faster page helps visitors and helps your search ranking. See WordPress hosting if your site is slow overall.

When to ask for help

If you have tried the steps above and still cannot load Google Maps correctly, copy the exact error from the console and send it to our team. The error code usually points straight to the cause.

Load Google Maps correctly every time

To load Google Maps correctly, you need a valid key, an active billing account and a referrer list that includes your site. Check those three things first whenever a map fails, and you will usually load Google Maps correctly again in minutes. If you only need a simple location, an embedded map is an easy way to load Google Maps correctly without any key.

Frequently asked questions

Why does Google Maps say this page can’t load Google Maps correctly?

Almost always because the Google Maps API key on the page is missing, invalid, restricted to the wrong address, or tied to a Google account without billing enabled. The browser console shows the exact error code.

Do I need a credit card to use Google Maps on my website?

For the Maps JavaScript API, Google requires a billing account on the project, although it includes a monthly free usage allowance. If you only need to show a location, an embedded map avoids the key entirely.

How do I show a map without an API key?

Open Google Maps, search for your address, choose Share, then Embed a map, and paste the iframe code into your page.

How do I fix the Google Maps developer-only watermark?

The watermark appears when the key has a billing or restriction problem. Fix the cause shown in the console and the watermark goes away.