Google Map error: InvalidKeyOrUnauthorizedURLMapEr

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 element. The provided Google API key is invalid or this site is not authorized to use it. Error Code: InvalidKeyOrUnauthorizedURLMapError"

The app does actually display the map element; the alert is not a problem except it should not appear at all. The map displays properly.

I have gone in to the Google Developer's Console and, in the "Credentials" section, have "edited allowed referrers" to be mydomain.com/*

I have also gone in to the Google Developer's Console in the APIs section and enabled 11 Google Maps APIs.

Answer 1

Go to APIs menu and find "Google Maps JavaScript API" after you open it just press "Enable API"

Answer 2

After struggling a lot with this issue I've found 1 solution for me. It might help people who are searching for a proper and exact solution but not the comments, downvotes and links.
(Map was not displayed in my case.)

If suppose,the link of page where you are loading map is
http://example.com/abc/def/ghi/kpn.php

then give thesame(exactly the same) under Edit allowed references

If you try loading the same page using:

www.example.com/abc/def/ghi/kpn.php

or

http://www.example.com/abc/def/ghi/kpn.php

then your page is loaded but not your map, and this alert is generated.

CONCLUSION

Use the same path(Url address) at these 2 places.

1. While loading the page which has map.

2. Under Edit allowed references.

After following this I've got rid from this alert.

Answer 3

After a lot of trial and error this worked for me (by Eduardo. Thanks !)

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.

Under Browser Credentials > REFERERS

Add these

1. .example.org/
2. www.example.org/*
3. http://www.example.org
4. http://example.org

Answer 4

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

Answer 5

geocodezip provided the info i needed. I was indeed loading the googlemaps library twice: once in my index.html file and once in an iFrame. I changed my code so that the iFrame did not load the googlemaps library but, instead, used the parent. Thanks geocodezip!

Answer 6

I got it to work by exchanging the keys with my own special created keys AND reading this webpage a few times very carefully. My advice is to add or exchange your Google API Keys at https://console.developers.google.com/apis/credentials before embarking in very complicated scripting.

Insert your own API keys in the very first line of the Google Map javascript: