Skip to content
Get a quote

Google Maps errorGoogle Maps shows “for development purposes only” or won’t load

The map is dark and watermarked, or it doesn’t appear at all. In our experience it often shows up only on the live site. Google says this usually points to the API key or billing, and the browser console names the exact error. Here is each error code and its fix, in Google’s words, or hand it over at a fixed price.

Short answer

Open the browser console on the page with the map and find the error ending in MapError. RefererNotAllowedMapError means your site’s address isn’t on the key’s allowed websites. ApiNotActivatedMapError means the Maps JavaScript API isn’t enabled. BillingNotEnabledMapError means the project has no billing. InvalidKeyMapError means the key in the page isn’t recognised.

What each console error means, and the fix

  1. 01

    RefererNotAllowedMapError: this website isn’t allowed to use the key

    “The current URL loading the Maps JavaScript API has not been added to the list of allowed referrers.” Google, Maps JavaScript API error messages

    The key has a website restriction and the address loading the map isn’t on it. This is why a map can work locally and fail live, or work on the live domain and fail on a preview URL. In the Cloud console, open the key and add every address that loads the map: the live domain, any www or preview domain, and your local address for development.

  2. 02

    The allowed website is written in the wrong format

    “Always provide the whole referrer string, including the protocol scheme, hostname and optional port” Google, Google Maps Platform security guidance

    Write each entry with the scheme, host name and port if you use one, such as https://example.com, and use a wildcard like https://*.example.com to allow all subdomains. Google warns that most browsers strip the path from cross-origin requests, so an entry like https://example.com/some/path may not match.

  3. 03

    ApiNotActivatedMapError: the Maps JavaScript API isn’t enabled

    “The Maps JavaScript API is not activated on your API project.” Google, Maps JavaScript API error messages

    The key belongs to a project where the Maps JavaScript API was never turned on. Enable it under APIs in the Cloud console for the same project the key comes from. If the console shows ApiTargetBlockedMapError instead, the key’s API restrictions leave this API out: add it to the key’s list of allowed APIs.

  4. 04

    BillingNotEnabledMapError: the project has no billing account

    “You have not enabled billing on your project which is causing this error.” Google, Maps JavaScript API error messages

    Google requires billing on the project behind the key. Link a billing account to that Cloud project, then reload the page.

  5. 05

    InvalidKeyMapError: the key in the page is wrong

    “The API key included in the script element that loads the API is not found. Please make sure you are using a correct API key.” Google, Maps JavaScript API error messages

    The key in the script tag doesn’t match a real key. In our experience this is often a key that was never set in the host’s environment variables, so the live build sends an empty or placeholder value. Compare the key in the page source with the one in the Cloud console.

Checked against the vendor’s docs on : Google Maps Platform: Maps JavaScript API error messages; Google Maps Platform: API security best practices.

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

Related: Environment variables undefined on Vercel · Unexpected Google API charges

Questions

More on this error

Should we remove the website restriction to make the map work?

No. Google tells you to restrict API keys and says you are financially responsible for charges caused by abuse of unrestricted keys. Add the missing addresses to the restriction instead.

Why does the map only fail on our preview or staging site?

Each address that loads the map has to be on the key’s allowed websites. A preview URL from your host is a different address from the live domain, so add it too, or use a wildcard where Google’s format allows one.

Can you fix it for me?

If one bug is the whole problem, the App Fix Ticket covers it: a written diagnosis first, then the fix. If the app has more going on, the Launch Check is a written check of the whole app. Each issue found is rated critical, high, medium or low, with where it is and how it was confirmed. No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way.

A different error?

Describe it and get a written quote

Send the error and what you were doing. You get a written scope, a fixed price and a timeline; we reply by email, usually within one business day.

Describe your problem All fixes