Google Map error: InvalidKeyOrUnauthorizedURLMapError

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.

Solution 1:

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.

Solution 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.