Why does my website say 'This page can't load Google Maps correctly'?

The map uses Google's Maps JavaScript API and its API key has a problem: no billing account on the key's project, the Maps JavaScript API not enabled, or the key restricted to a different website address. The browser console names the exact error, such as BillingNotEnabledMapError or RefererNotAllowedMapError. For a single location, replacing it with Google's free embed avoids the key altogether.

Do I need an API key to put a Google Map on my website?

Not for a map of one location. In Google Maps, open your business listing, click Share, then Embed a map, copy the HTML and paste it into a Custom HTML block. That embed needs no key and no billing. Store locators, maps with many pins and some theme map fields use the Maps JavaScript API, which does need a key.

Why is the Google Map on my WordPress site just a grey box?

Common causes are a cookie consent plugin blocking Google Maps until the visitor accepts, a speed plugin delaying or combining the map's script, a map box with no height, an embed address starting with http:// on an https site, or a Content-Security-Policy header that does not allow Google. Accept the cookie banner and check the browser console to see which one it is.

What does 'For development purposes only' on a Google Map mean?

The map's API key belongs to a Google Cloud project with no billing account, or the key is missing. Link a billing account to the project in the Google Cloud console, or switch a single-location map to the free embed, which needs no key.

More fixes

Google Map not showing on your website

The map on a contact page tells a customer where to go, and it fails quietly: a grey box, a box that says "This page can't load Google Maps correctly", a dark map stamped "For development purposes only", or nothing at all. There are six usual causes, and the first question settles most of them: is the map a plain Google embed, or does it need an API key? A plain embed is free and needs no key, so it is often the quickest fix of all. Below is a rebuilt example (not a real client), how to tell which cause you have, and the fix for each.

The contact page

What the checks found

First: which kind of map is it?

Look at what the box says. "This page can't load Google Maps correctly. Do you own this website?" or a dark map with "For development purposes only" means the map uses Google's Maps JavaScript API and the API key behind it has a problem. A grey or empty box with no message is usually one of the other four causes below.
Read the exact reason. In Chrome, right-click the page, choose Inspect, then the Console tab, and reload. A key problem prints a line such as Google Maps JavaScript API error: BillingNotEnabledMapError; the name after "error:" is in the table below.
Find where the map comes from. A map plugin (WP Go Maps, MapPress, a store-locator plugin) or a theme's "Google Maps" setting usually asks for a key. Elementor's Google Maps widget, Divi's map module with an address only, and a pasted <iframe src="https://www.google.com/maps/embed?..."> are embeds and need no key.

The fastest fix for a single location: use the free embed

If all the map has to do is show where you are, you do not need an API key, a Google Cloud account or billing at all.

Open Google Maps, search for your business by name (so the pin shows your listing, reviews and directions button), click Share, then Embed a map, and Copy HTML.
In WordPress, add a Custom HTML block where the map goes and paste it there. Not into the Paragraph block or the Classic editor's Visual tab: those strip or mangle the <iframe>. In Elementor use the HTML widget, or the Google Maps widget with your address. Wix, Squarespace and Shopify each have an embed or map block that takes the same code.
To make it fit phones, change width="600" in the pasted code to width="100%" and keep the height.

If the map needs an API key: the errors and their fixes

Store locators, maps with many pins, and themes with a key field need the Maps JavaScript API. Every fix below is in the Google Cloud console (console.cloud.google.com) under the project that owns the key; if nobody remembers whose Google account that is, it is often quicker to make a new project and key under the business's own account.

Console error	What it means	What to do
`MissingKeyMapError` / `InvalidKeyMapError`	No key was sent, or the key was deleted or mistyped	Create a key (APIs & Services > Credentials > Create credentials > API key) and paste it into the plugin or theme setting
`BillingNotEnabledMapError`	The project has no billing account, so Google stops the map; this is also what puts "For development purposes only" on it	Link a billing account to the project (Billing in the console). Google gives a monthly free allowance that a small business's contact-page map normally stays inside; set a budget alert so you hear about any change
`ApiNotActivatedMapError`	The key exists but the Maps JavaScript API is not switched on for its project	APIs & Services > Library > Maps JavaScript API > Enable. A store locator or an address search box may also need the Geocoding API or Places API; the plugin's settings page says which
`RefererNotAllowedMapError`	The key is restricted to a list of websites and yours is not on it, very often after a domain change or a move from www to non-www	Edit the key's "Website restrictions" to include both `https://yourbusiness.com/` and `https://www.yourbusiness.com/` (and a staging address if you use one)
`ApiTargetBlockedMapError`	The key's "API restrictions" do not include the Maps JavaScript API	Edit the key and tick Maps JavaScript API (and the others the plugin needs) under API restrictions
`ExpiredKeyMapError`	The key was deleted or replaced	Make a new key and update the plugin setting

Do keep the website restriction on. A key with no restriction can be copied out of your page source and used on other sites at your expense.

A grey or empty box with no error

A cookie banner is holding the map back. Complianz, CookieYes, Borlabs and similar plugins block Google Maps until the visitor accepts, and some show nothing in its place. Accept the banner and reload: if the map appears, that is it. Turn on the plugin's map placeholder ("click to load map") so visitors see a button instead of an empty box.
A speed plugin is delaying or combining the map's script. "Delay JavaScript execution" (WP Rocket), "Aggregate JS" (Autoptimize) and similar settings in LiteSpeed Cache, Perfmatters or SiteGround Optimizer can break a map. Exclude maps.googleapis.com and the map plugin's script from those settings, then clear the cache.
The box has no height. A map script draws into a box, and a box with height 0 shows nothing. Give the map block or widget a height (300 to 450 pixels suits most pages) in its own settings rather than leaving it on "auto".
The embed address starts with http://. On an https site the browser blocks it as mixed content. Change it to https://. More in the "Not secure" guide.
A security header blocks Google. A Content-Security-Policy set by a security plugin or the host that does not allow https://www.google.com as a frame source (for embeds), or maps.googleapis.com and maps.gstatic.com as script and image sources (for the API), leaves the box empty. The console names the blocked address; add it to the policy.

What not to do

Do not paste a screenshot of the map in its place. It cannot give directions, and a phone visitor expects to tap it.
Do not remove the website restriction from a key to "make it work". Add your domain to it instead.
Do not keep an API key setup just for one pin. The free embed does that job with nothing to maintain.

For most small sites this is a five-minute swap to the free embed, or one setting in the Google Cloud console. If you would rather hand it over, or the map comes from a store locator with many locations, that is what the box below is for. Related: changes not showing (a cache serving the old page after the fix), an older site that shrinks on phones, and a slow site.