I'm no stranger to Google Maps APi, and have used it for years...but I am stumped. I've installed an exact copy of the latest code sample from Google Maps Javascript API: Simple Map. I then confirmed both my browser and server keys from Google Developers Console, added the refer two different ways(see below). Code works when I set the referer to * wildcard in console, but cannot use that in production.
Here's the skinny:
tested using latest example code from Google Maps API Javascript (Simple Map)
YOURAPIKEYHERE - replaced with an active browser key from my account
referer was tried as both *./domain.ext/* and domain.ext/*
Also tried a server key, with server IP as allowed referer.
CANNOT USE, BUT WORKED : used a wildcard for allowed referer using browser key, but I can't use that in production...anyone could use my key on my dime
SUSPECTED CULPRIT
Since the key works when I add a wildcard, but not with the referer domain name, it seems suspicious. This should indicate that the key works, but that the referer information is not getting passed to Google.
My site is behind CloudFlare. My research is not finding any answers anywhere, but I'm beginning to wonder if this could be the issue. Nothing else seems to work.
SOLUTION: The google console specifically shows the format for this. But it is WRONG.
Instead of *./domain.ext/*
use: http://domain.ext/*
A special thanks to Google for crappy docs, and a very special thanks to the user that downvoted my question!
Note: Depending on your setup, it may be necessary to use: http://www.domain.ext/*
I did not test this as my use case excludes www.
I know you found a misconfiguration in your API key but I had the same issue and found a different fix.
Cloudflare can mess this up. Testing with mine now shows rocket loader and Brotli in the speed area stop google maps working. Deactivate them and clear the cache to fix.
来源：https://stackoverflow.com/questions/38081123/google-maps-api-3-referrernotallowedmaperror