Google Maps API Referrer Not Allowed Error

When embedding Google Maps or using Google Maps API programmatically, the calls to Google Maps API may fail with the following error message displaying on the Google Maps with exclamation mark icon on gray background, instead of displaying proper map.

Oops! Something went wrong.

This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

When inspecting the web console for any JavaScript error, the following error is recorded:

Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://domain.name/url/

The error always happens especially when Google Maps Geocoding API is in use, and API key restriction is in place via HTTP referrers (web sites), even though the acceptance filters which specifies the requests to accept (the URL of website that is loading the Google Maps) have been correctly configured. It can also happen with other Google Maps APIs such as Google Maps JavaScript API, Google Maps Directions API, Google Maps Geolocation API and etc.

The error is directly caused by the current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers for the API key, thus is not authorized. However, if you’re sure that the correct URLs have been added into the list of approved websites, the issue may be caused by an undocumented error on usage of wildcards.

When adding approved referrers into API key restriction, Google API console provides an example if you want to use wildcards, in the following format, to match all subdomains:

*.example.com/*

However, the above format is not working properly. In fact, the above example only works if there is a subdomain in front of the domain name, e.g. www.example.com. If your website starts with just domain name, e.g. example.com only, Google Maps API may reject its authentication. In order to fix the referrer not allowed issue, try one of the following format for the URL referrers for API key restriction:

1. Add actual protocol to the URL. For example:

   http://example.com/*
   https://example.com/*

   If you need to include also the many sub-domains, try:

   http://*.example.com/*
   https://*.example.com/*

2. If you don’t mind to risk other websites with domain name similar to yours using your API key, try the following (note that removal of dot in front of domain name):

   *example.com/*

   Note

   This restriction will allow any domain name ending with example.com (such as abcexample.com and etc.) to use the API key.

Note that after saving the changes to key restriction, it may take up to 5 minutes for the changes to take effect.