[javascript] Google Maps JavaScript API RefererNotAllowedMapError

We're trying to develop an geoplacement app for one of our clients, and we want first to test it in out own domain.

We have signed for Google Maps JavaScript API, and we have a valid browser key and our domain, www.grupocamaleon.com, has been authorized to use that key.

But we can't make even the easiest example to run without error.

We have, in our domain and with our key, the following demo:

(1) http://www.grupocamaleon.com/boceto/aerial-simple.html

But it doesn't work, and Firebug console says:

"Google Maps API error: Google Maps API error: RefererNotAllowedMapError (link to Google documentation on RefererNotAllowedMapError) Your site URL to be authorized: (1)"

My credential page is missing the possibility of adding referrers to accept, so solutions involving adding referrers are not possible right now.

My credential Page:

enter image description here

Why do we get that error? How can we fix it?

This question is related to javascript google-maps google-maps-api-3

The answer is


According to the documentation, 'RefererNotAllowedMapError' means

The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google Developers Console.

I have the Google Maps Embed API set up for my own personal/work use and thus far have not specified any HTTP referrers. I register no errors. Your settings must be making Google think the URL you're visiting is not registered or allowed.

enter image description here


I found that even your HTTP Referreres are valid enough, wrong set of API Restrictions causes Google Maps JavaScript API error: RefererNotAllowedMapError.

For example:

  • You are using Javascript API for the key.
  • Add http://localhost/* to Application Restrictions / HTTP Referrences
  • Choose Maps Embed API instead of Maps Javascript API
  • This causes RefererNotAllowedMapError

Just remind that if you just change it, it may take up to 5 minutes for settings to take effect.


According the google docs this happened because the url on which you are using the Google Maps API, it not registered in list of allowed referrers

EDIT :

From Google Docs

All subdomains of a specified domain are also authorized.

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

So,Please configure http://testdomain.com domain, then your http://www.testdomain.com will start work.


This is another sh1tty Google product with a terrible implemenation.

The problem I have found with this is that if you restrict an API key by IP address, it wont work... BUT far be it from Google to make this point clear... It wasn't until troubleshooting and researching I found:

API keys with an IP addresses restriction can only be used with web services that are intended for use from the server side (such as the Geocoding API and other Web Service APIs). Most of these web services have equivalent services within the Maps JavaScript API (for example, see the Geocoding Service). To use the Maps JavaScript API client side services, you will need to create a separate API key which can be secured with an HTTP referrers restriction (see Restricting an API key).

https://developers.google.com/maps/documentation/javascript/error-messages

FFS Google... Pretty important piece of information that would be good to clarify on setup...


Come on Google, you guys are smarter than the API Credential page lets on. (I know because I have two sons working there.)

The list of "referrers" is far pickier than it lets on. (Of course, it should be more forgiving.) Here are some rules that took me hours to discover:

There are probably other rules, but this is a tedious guessing game.


The Problem
Google suggestions the format *.example.com/*
This format does not work.

The Solution
Check the browser console for the Google Maps JavaScript API error: RefererNotAllowedMapError
Underneath the error it should have: "Your site URL to be authorized: https://example.com/".
Use that url for the referrer and add a wildcard * to the end of it (https://example.com/*, in this case).


I was attempting to use the Places API (Autocomplete) and had to also enable the Maps Javascript API from within Google Cloud Console before the Places API would work.


I experienced the same error:

enter image description here

This link talks about how to set up API key restrictions: https://cloud.google.com/docs/authentication/api-keys#adding_http_restrictions

In my case, the problem was that I was using this restriction:

HTTP referrers (web sites) Accept requests from these HTTP referrers (web sites) (Optional) Use *'s for wildcards. If you leave this blank, requests will be accepted from any referrer. Be sure to add referrers before using this key in production. https://*.example.net/*

This means that URLs such as https://www.example.net or https://m.example.net or https://www.example.net/San-salvador/ would work. However, URLs such as https://example.net or https://example.net or https://example.net/San-salvador/ would not work. I simply needed to add a second referrer:

https://example.net/*

That fixed the problem for me.


you show a screenshot of your api credentials page, but you have to click on "Browser key 1" and go from there to add referrers.


  1. That your billing is enabled

  2. That your website has been added to Google Console

  3. That your website is added to the referrers in your app.

  4. (do a wildcard for both www and none www)

http://www.example.com/* and http://example.com/*

  1. That Javascript Maps is enabled and you are using the correct credentials

  2. That the website has been added to your DNS to enable your Google Console above.

  3. Smile after it works!


I tried many referrer variations and waiting 5 minutes as well until I realized the example Google populates in the form field is flawed. They show:

*.example.com/*

However that only works if you have subdomain. or www. in front of your domain name. The following worked for me immediately (omitting the leading period from Google's example):

*example.com/*

enter image description here

Accept requests from these HTTP referrers (web sites)

Write localhost directory path


http://www.example.com/* has worked for me after days and days of trying.


For deeper nested pages

If you have a project in a folder for example or nested pages

http://yourdomain.com/your-folder/your-page you can enter this in

http://yourdomain.com/*/*

The important part being /*/*/* depending how far you need to go

It seems that the * will not match / or get into deeper paths..

This will give your full domain access, well unless you have deeper nesting than that..


I know this is an old question that already has several answers, but I had this same problem and for me the issue was that I followed the example provided on console.developers.google.com and entered my domains in the format *.domain.tld/*. This didn't work at all, and I tried adding all kinds of variations to this like domain.tld, domain.tld/*, *.domain.tld etc.

What solved it for me was adding the actual protocol too; http://domain.tld/* is the only one I need for it to work on my site. I guess I'll need to add https://domain.tld/* if I were to switch to HTTPS.

Update: Google have finally updated the placeholder to include http now:

Google Maps API referrer input field


This worked for me. There are 2 major categories of restrictions under api key settings:

  • Application restrictions
  • API restrictions

Application restrictions:

At the bottom in the Referrer section add your website url " http://www.grupocamaleon.com/boceto/aerial-simple.html " .There are example rules on the right hand side of the section based on various requirements.

Application restrictions

API restrictions:

Under API restrictions you have to explicitly select 'Maps Javascript API' from the dropdown list since our unique key will only be used for calling the Google maps API(probably) and save it as you can see in the below snap. I hope this works for you.....worked for me

enter image description here

Check your Script:

Also the issue may arise due to improper key feeding inside the script tag. It should be something like:

  <script async defer src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

In my experience

http://www.example.com

worked fine But, https required /* at the end


There are lots of supposed solutions accross several years, and some don’t work any longer and some never did, thus my up-to-date take working per end of July 2018.

Setup:

Google Maps JavaScript API has to work properly with…

  • multiple domains calling the API: example.com and example.net
  • arbitrary subdomains: user22656.example.com, etc.
  • both secure and standard HTTP protocols: http://www.example.com/ and https://example.net/
  • indefinite path structure (i.e. a large number of different URL paths)

Solution:

  • Actually using the pattern from the placeholder: <https (or) http>://*.example.com/*.
  • Not omitting the protocol, but adding two entries per domain (one per protocol).
  • An additional entry for subdomains (with a *. leading the hostname).
  • I had the feeling that the RefererNotAllowedMapError error still appeared using the proper configuration (and having waited ample time). I deleted the credential key, repeated the request (now getting InvalidKeyMapError), created new credentials (using the exact same setup), and it worked ever since.
  • Adding mere protocol and domain seemed not to have included subdomains.
  • For one of the domains, the working configuration looks like this:

Screenshot from Google API configuration

(As text:)

Accept requests from these HTTP referrers (web sites)
    https://*.example.com/*
    https://example.com/*
    http://*.example.com/*
    http://example.com/*

Check your decklaration on site. To load the Google Maps JavaScript API, use a script tag like this

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

I using this declaration on my Wordpress site in function.php file

wp_enqueue_script("google-maps-v3", "//maps.google.com/maps/api/js?key=YOUR_API_KEY", false, array(), false, true);

I have set API key on this format, and its works fine

http://my-domain-name(without www).com/*

this declaration not working

*.my-domain-name.com/*

I struggled to make this work as well, but here are some pointers:

  • The URLs set as referrers include http, e.g. http://example.com/*
  • Google Maps JavaScript API was enabled
  • Billing was set-up on this account

Once all of this above was resolved, the maps displayed as expected.


Wildcards (asterisks) ARE NOT allowed in the subdomain part.

  • WRONG: *.example.com/*
  • RIGHT: example.com/*

Forget what Google says on the placeholder, it is not allowed.


Chrome's Javascript console suggested I declare the entire page address in my HTTP referrer list, in this instance http://mywebsite.com/map.htm Even though the exact address is http://www.mywebsite.com/map.htm - I already had wildcard styles listed as suggested by others but this was the only way it would work for me.


Removing the restrictions (to None) worked for me.


Enable billing for Google project fixed the problem.


I add 2 website domains, set "*" in subdomain is not working but specific subdomain "WWW" and non-subdomain have been worked for my websites using the same Google Map API key.

dont' use "*" in subdomain

Hope it help.


Check you have the correct APIS enabled as well.

I tried all of the above, asterisks, domain tlds, forward slashes, backslashes and everything, even in the end only entering one url as a last hope.

All of this did not work and finally I realised that Google also requires that you specify now which API's you want to use (see screenshot)

enter image description here

I did not have ones I needed enabled (for me that was Maps JavaScript API)

Once I enabled it, all worked fine using:

http://www.example.com/*

I hope that helps someone! :)


None of these fixes were working for me until I found out that RefererNotAllowedMapError can be caused by not having a billing account linked to the project. So make sure to activate your free trial or whatever.


I got mine working finally by using this tip from Google: (https://support.google.com/webmasters/answer/35179)

Here are our definitions of domain and site. These definitions are specific to Search Console verification:

http://example.com/ - A site (because it includes the http:// prefix)
example.com/ - A domain (because it doesn't include a protocol prefix)
puppies.example.com/ - A subdomain of example.com
http://example.com/petstore/ - A subdirectory of http://example.com site

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to google-maps

GoogleMaps API KEY for testing Google Maps shows "For development purposes only" java.lang.NoClassDefFoundError:failed resolution of :Lorg/apache/http/ProtocolVersion How to import JSON File into a TypeScript file? Googlemaps API Key for Localhost Getting "Cannot call a class as a function" in my React Project ERROR: Google Maps API error: MissingKeyMapError This page didn't load Google Maps correctly. See the JavaScript console for technical details Google Maps API warning: NoApiKeys ApiNotActivatedMapError for simple html page using google-places-api

Examples related to google-maps-api-3

Google Maps shows "For development purposes only" Googlemaps API Key for Localhost ERROR: Google Maps API error: MissingKeyMapError Google Maps API warning: NoApiKeys Google Maps JavaScript API RefererNotAllowedMapError This API project is not authorized to use this API. Please ensure that this API is activated in the APIs Console TypeError: window.initMap is not a function Google maps Marker Label with multiple characters Google Maps how to Show city or an Area outline How to use SVG markers in Google Maps API v3