The Google Map on your contact page is blank — how to fix it

You open your contact page and where the map should be, there's a grey rectangle, a map covered by a "For development purposes only" watermark, or simply nothing. For a customer trying to find you, it's as if you moved without telling anyone. The good news: almost every time it's a small configuration issue, not something permanently broken.

In this article I'll walk you through the real causes in plain language (not all of them involve an "expensive API key") and how to fix each one, step by step. The single most important thing to remember: for a simple map showing your business address, in most cases you don't even need an API key. There's a free option that doesn't break.

First, figure out WHICH kind of map you have

Before anything else, you need to know what type of map your site uses, because the fix depends on it. There are two versions:

• Simple iframe map (Embed) — the code looks like `<iframe src="https://www.google.com/maps/embed?...">`. This is the free version, needs no API key, and is the one I recommend for most businesses.
• JavaScript map (Maps JavaScript API) — the code contains `maps.googleapis.com/maps/api/js?key=...`. This needs an API key, an active billing account with Google, and it's usually the source of error messages.

To see which you have, open the contact page, right-click on the map area and choose "Inspect". Look for the words `embed` or `api/js`. If there are errors in red in the console (the "Console" tab), write them down — they tell you exactly what's wrong.

The typical error messages and what each one means

If you're using the API-key version, the map tells you itself what's bothering it. The most common:

• "For development purposes only" (map covered by a watermark) — billing isn't enabled on the Google Cloud project, or the key has no payment account attached.
• BillingNotEnabledMapError — same thing: billing must be enabled, even if you stay within the free monthly limit.
• RefererNotAllowedMapError — the key is restricted to a different domain. You changed domains, moved from HTTP to HTTPS, or launched a new site, and the current address isn't on the allowed list.
• ApiNotActivatedMapError — you haven't activated the "Maps JavaScript API" service in the Google Cloud console.
• InvalidKeyMapError — the key is wrong, deleted, or copied incorrectly.

You'll see the message either on the map or in the browser console. It's your map to the solution — literally.

The simple fix: switch to the free embed, no key needed

If all you want is a map with your business address that customers tap to start navigation, you don't need any API key. Here's how:

1. Go to Google Maps, search for your exact business address (ideally your Google Business profile).

2. Click Share → the Embed a map tab.

3. Choose the size and copy the whole `<iframe ...>` code.

4. Paste it into your contact page, replacing the old map.

Done. This code doesn't depend on billing, doesn't expire, and won't throw error messages at you. It's what I recommend for most local businesses because it's set-and-forget: you place it once and stop thinking about it. The API key stays useful only if you need complex interactive maps (multiple pins, custom styling, in-site route calculation).

If you want to keep the API key — the correct repair

Sometimes the site is already built on the Maps JavaScript API and you don't want to rewrite it. Then check, in order:

• Active billing: in the Google Cloud Console, the project must have a payment account linked. Google offers a generous free monthly allowance for a small business, but a card must exist on the account.
• Service enabled: activate "Maps JavaScript API" (and "Maps Embed API" if you use keyed embeds).
• Key restrictions: under "Application restrictions" → "HTTP referrers", add your domain correctly — both with `www` and without, and on HTTPS. A classic mistake is to add only `example.com` and forget `www.example.com`.
• Mixed content: if the site is on HTTPS but the map is called over HTTP, the browser blocks it. Everything must be `https://`.

After any key change, wait a few minutes — Google doesn't apply changes instantly.

Less obvious causes: the cookie banner and blockers

Sometimes the map is configured correctly but still won't appear. Check these too:

• Consent (cookie) banner — many GDPR solutions block Google Maps until the visitor accepts marketing cookies. That's legally correct, but many visitors decline and end up with no map. The fix is either a placeholder with a "Show map" button, or going back to the simple embed treated as a basic element.
• Blocker extensions (ad blockers) — some block Google scripts. Test the map in an incognito window with no extensions to rule this out.
• Cache — after you fix it, clear the site's and the browser's cache, otherwise you keep seeing the old, broken version.

If you've tried all this and it still won't work, or you'd rather not wrestle with the Google Cloud console, message us on WhatsApp at MPO Web Studio. We'll look remotely, tell you exactly what's wrong, and often fix it on the spot — we work remotely nationwide and show you a demo first, at no cost.