22

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.

Jim Andrews
  • 375
  • 1
  • 2
  • 14
  • Try adding 'www.mydomain.com/*' to the allowed referrers. – Gautam Bhutani Apr 10 '15 at 22:45
  • Thanks. Tried it. No change. – Jim Andrews Apr 11 '15 at 00:43
  • In the console, when the alert box pops up with the above message, I see this message: "InvalidKeyOrUnauthorizedURLMapError: https://developers.google.com/maps/documentation/javascript/tutorial#api_key VM3230:45" but when I set a breakpoint in VM3230, the next time the alert occurs, the reference is to another file such as VM3278:45, so I can't pause the program right when it happens to see where it is in my program. – Jim Andrews Apr 11 '15 at 01:45
  • 2
    Usually when this happens and the map is displayed, the API is being included more than once, once with the key you expect (or no key) and once with a bad key... – geocodezip Apr 11 '15 at 02:56
  • Yes you are correct that the API is being included more than once: once in index.html and once in an iFrame in index.html. They were using the same key. After what you said, I thought using the same key might be a problem, so I created another project in the Google Developers Console and gave the two inclusions different keys. But that doesn't seem to work either. – Jim Andrews Apr 15 '15 at 03:28
  • Hello @JimAndrews.Have you found any solution for this issue.Even am struggling with it.Could you suggest me how to solve this – Prabs Apr 20 '15 at 05:44
  • Hello @PrathibhaKirthi. I think I know how to solve it now and will try it out in the next few days when I get a chance. geocodezip's comment is important. I am indeed including the API twice. Once in the main index.html and once in an iFrame in that file. The key, I think, will be to just include the API once. And communicate between the scripts in index.html and the scripts in the iFrame in index.html. – Jim Andrews Apr 23 '15 at 21:58
  • Could you kindly check this once please.[Question](http://stackoverflow.com/questions/29846040/how-to-use-generated-key-in-google-maps) – Prabs Apr 24 '15 at 11:26
  • I had the same errormessage. My fault was that I used the wrong API Key. For [Google Exmaple: Place autocomplete](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?csw=1) a **Google Maps JavaScript API** is needed, but I had instead used the _Google Maps Geocoding API_ which throw this error. Using the correct API Key solved my problem. – jerik Dec 03 '15 at 15:09

10 Answers10

23

After lots of referrer combinations, deleting and re-creating credentials i realized that i didn't enabled "Google Maps JavaScript API". What a shame. :)

For anyone who is having trouble to get google maps api work please check if the API enabled first.

Yarimadam
  • 1,128
  • 9
  • 12
  • 2
    Wasted 3 hours on this. Thank you very much. This worked. – New to Rails Dec 30 '15 at 07:50
  • 1
    I was trying to use the _Google Places API Web Service_ so it never occured to me that _Google Maps JavaScript API_ also had to be enabled. – Zomby Jan 06 '16 at 16:37
  • 2
    Wow, struggled for a week and at the end this was the problem. They should send back more clear error message instead of `InvlidKeyOrUnauthorizedURLMapError`. Thanks Tuncay +1. – Eng.Fouad Feb 07 '16 at 08:31
  • TNX bro. i wasted lot of time to figure this out. – Sathya Baman Feb 15 '16 at 06:28
9

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.

Prabs
  • 4,923
  • 6
  • 38
  • 59
4

First you need to go to https://console.developers.google.com/ and select APIs.

In Google Maps APIs select Google Maps JavaScript API and make sure you enable API for Google Maps JavaScript.

Secondly, you need to create an API key:

  1. Go to Credentials
  2. Create new key and select Browser Key
  3. No need to specify any referrers

So you should see Any referrer allowed after you save.

Sereysethy Touch
  • 41
  • 3
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
T3 H40
  • 2,326
  • 8
  • 32
  • 43
PlanetAutomatic
  • 31
  • 1
2

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!

Jim Andrews
  • 375
  • 1
  • 2
  • 14
2

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

Khairudi
  • 21
  • 3
0

I was able to get this to work by deleting all my referrers and allowing all. Apparently there is a bug in the developer console that is causing problems. Some people say that they can get referrers to work by deleting all then adding all back in at once instead of line by line:

https://productforums.google.com/forum/#!topic/maps/mSVyDazRMQo

Previous things I tried:

  1. Regenerating Key
  2. Setting all maps apis to enabled
  3. Hard coding absolute paths of referrers

A side note, when I didn't include my api_key everything worked fined, though I'm sure they will eventually turn you off if you don't use your api_key.

AaronP
  • 196
  • 2
  • 11
0

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

Eduardo
  • 4,282
  • 2
  • 49
  • 63
0

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:

Lars Ljungqvist
  • 1
  • 1
0

If you have been setup all configuration like api key etc, and you still got the error, please enable all your mandatory APIs regarding to google maps.

Like:-

Google Maps Embed API
Google Maps Geocoding API
Google Maps Geolocation API
Google Maps JavaScript API

Dinesh Sharma
  • 89
  • 1
  • 3