Google Maps API error: RefererNotAllowedMapError [SOLVED]

While trying to embed Google Maps on your website, you may encounter the nasty Google Maps API error: RefererNotAllowedMapError in your browser console. Let’s see how to fix it.

As the name suggests, this error is related to the Google Maps API keys. You need one of them in order to embed Google Maps on your websites, and you can get it following the tutorial on this page.

After creating your API key, you can restrict its usage to a list of URLs, in order to protect your daily quota (25,000 map loads per project per day) from unauthorized usage. And here it come the problems.

You must be very careful when adding URLs to the authorized referrers field. First of all, let’s see what the official documentation says on this topic:

The following considerations apply regarding URLs that are authorized:

The domain name or IP address does not have to be publicly accessible

For example, http://myintranet and http://192.168.1.1 are valid entries.

All subdomains of a specified domain are also authorized

For example, if http://example.com is authorized, then http://www.example.com is also authorized. The reverse is not true: if http://www.example.com is authorized, http://example.com is not necessarily authorized.

All subpaths of an authorized path are also authorized

For example, if http://example.com is authorized, then http://example.com/foo is also authorized. In addition, because subdomains of a specified domain are also authorized, http://sub.example.com/bar is authorized.

Paths are case sensitive

For example, http://www.example.com/ThisPath/ is not the same as http://www.example.com/thispath/.

You may restrict valid URLs to those using certain ports

For example, if http://example.com:8080/foo is specified, that doesn’t authorize http://example.com.

HTTP and HTTPS protocols are considered different URLs

For example, if https://example.com is authorized, http://example.com is not necessarily authorized. If you’d like to authorize both at once, you may add a domain without using a protocol: example.com/

All the rules above are applied to each authorization, so you should take care to plan your authorizations carefully. For example, because all subpaths of a specified path are authorized, and all subdomains, you may end up authorizing pages that you didn’t intend to. For example:

http://example.com/ also authorizes http://sub.example.com/path.

In addition to the above, just few other considerations are needed:

• If your URL version without http:// or https:// protocols doesn’t work, try to add to the list also the same URLs preceded by them.
• Each change you make may take a few minutes before being effective.
• If you don’t need any restriction, and to leave the field blank doesn’t work for you, try to add an asterisk * instead.

Did this article help you to fix the Google Maps API error: RefererNotAllowedMapError? Tell us in a comment below!