Google Map error: InvalidKeyOrUnauthorizedURLMapError

Question

I am developing in JavaScript/HTML/CSS an app that uses Google Maps. I am getting the following alert dialog box:

\"This page was unable to display a Google Maps ele

Answer 1

What worked for me was to use Firebug in order to find the exact URL that made the request to the Google Maps API. As stated in Google Maps API documentation on troubleshooting authorization, "How to find the correct URL" part:

The URL that needs to be authorized is the one in the Referrer header for the requests the browser sends to Google to load the API.

In my case, lets suppose I have a website example.com. In the developer console, under Google Maps API key, I've added many combinations of referrer such as example.com/*, *.example.com/*, example.com, but still the InvalidKeyOrUnauthorizedURLMapError persisted.

My solution, as I've mentioned, to use Firebug: open example.com and look for what was the referrer making request to https://maps.googleapis.com/maps/api/js?..., and it was http://example.com, and that is it. I've added http://example.com/* to the enabled URLs in the Developers Console under my respective API key and now everything works fine.

It is important to know where to look for on Firebug: it is the Net tab. Just click on the request to maps.googleapis ... and look for the Referer