The Google Maps API fails me - google-maps

I have created a website and Google Maps is failing me to locate the company.
I have generated a KEY API in the Google console and I have introduced it in WordPress through the "Google maps API Key" plugin.
The case is that the map is seen for 1 second, but then it stops showing and the following error message appears: "An error has occurred, this page has not loaded Google Maps correctly." Discover the technical details of the problem in the javascript console ".
The web in question is: https://arsaiguarderia.com/
The map is on the home screen at the bottom and on the contact screen.

I see this:
js?key=A.....Y&ver=3.4:50 Google Maps JavaScript API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: https://arsaiguarderia.com/
Maybe you need to go to your Google Cloud Platform > API project > API > Credentials > API key name. Then set the HTTP referrers restriction to your web site name.

Looks like its a problem of http referers according to the javascript console, could you make sure your site is not blocked in the google console? Edit your api key and look for application restrictions

Related

"Google Maps Platform rejected your request" error when trying to use Google Map Embed API

Just sharing because I couldn't find any information on this error, and I wanted the solution to be out there.
I was trying to embed a map on my website using Google Map Embed API, but I kept getting the following error, no matter what I did with my App permissions:
Google Maps Platform rejected your request. You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account
My map src url was structured like so:
https://www.google.com/maps/embed/v1/place?q=Washington,DC&key=[API Key]
and it seemed to match the guidelines, so I couldn't figure out what was wrong.
I can't find this anywhere in the documentation, but it's this simple - the key params is supposed to be first.
Just turn this:
https://www.google.com/maps/embed/v1/place?q=Washington,DC&key=[API Key]
into this:
https://www.google.com/maps/embed/v1/place?key=[API KEY]&q=Washington,DC
and now it works.

How can I get Google maps to show on my website

I am unable to implement google maps on my website, despite generating an API key for it and configuring it correctly on the website.
http://josebaattard.com/about/
the console tells you the error:
Google Maps JavaScript API error: RefererNotAllowedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: http://josebaattard.com/about/
You have limited your API-Access to an certain url and this one is not allowed.

Google Maps API error: RefererNotAllowedMapError I allow all domains in console

Please Help to repair this problem
Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error.....There is a screen
http://prntscr.com/j0f3xa
I allow all domains in console
It's also in the comment from #Preston -- as of now (Nov. '18), the error message from the Google API - that there is a problem with a missing referrer allowance, might be misleading.
If the JS API is enabled for the project, but still not for the concrete API KEY, this error is displayed.
https://console.cloud.google.com/apis/credentials
enter image description here

Google API Key for Google Maps in ZK Application from domain name

I have a ZK (Java Spring) application using Google Maps (gmaps). The version of ZK I am using is 7.0.3 EE.
In my application I didn't use a google API key, and since some time ago things seemed to work fine (I could correctly visualize the map).
It seems that since last july the use of an API key has become necessary, so I am trying to insert an API key.
So, I created a Browser API Key for my application, following the instruction at this https://support.google.com/cloud/answer/6158862?hl=en&ref_topic=6262490. Then, following the example at https://www.zkoss.org/zkdemo/reporting/google_map I added the following tag in my .zul page:
<script type="text/javascript" content="zk.googleAPIkey='my api key'" />
<gmaps ...>
</gmaps>
Note that if I access the web application from a local IP the map is correctly shown. If, on the other hand I access it through a registered domain name portal.mydomain.eu instead of the map I see a gray box with the following error message (note that in "Accept requests from these HTTP referrers (web sites)" I inserted my domain name as "*.mydomain.eu/"):
Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
The following are the Javascript console error messages (the messages are in Italian, I've inserted the english translation below each line where relevant):
GET
http://portal.mydomain.eu/images/portal_footer.jpg [HTTP/1.1 404 Not Found 23ms]
L’API Fullscreen con prefisso è deprecata, al suo posto utilizzare l’API senza prefisso. Per ulteriori informazioni consultare https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API controls.js:23:54
***the Fullscreen API with prefix is deprecate, use insteass the API without a prefix. For further information ... ***
"Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error" js:35:350
"Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys" util.js:221:12
"Google Maps API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-version" util.js:221:12
"Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required" util.js:221:12
"Google Maps API warning: InvalidClientId https://developers.google.com/maps/documentation/javascript/error-messages#invalid-client-id" util.js:221:12
L’utilizzo di getPreventDefault() è deprecato. Al suo posto utilizzare defaultPrevented.
***the usage of getPreventDefault() is deprecated. Use instead defaultPrevented.***
Any idea on what can I be doing wrong? Is it ok to have a "Browser Key" or do I need a different type of key?
edit:
I tried to replace the script tag with the one found at the link Whats the API Key for in Google Maps API V3?
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
With this I see a white box instead of the gray one, and on the javascript console the error is now Google Maps API error: RefererNotAllowedMapError
Your answer to the updated question can be found on the documentation. Basically, RefererNotAllowedMapError indicates that the URL loading the API is not added to the list of referrers.
The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google API Console.
See API keys in the Google API Console. For more information, see Best practices for securely using API keys.
There is a new version of gmaps just released
Try this version : 3.0.4.
https://www.zkoss.org/download/zkgmaps
You can try this code :
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"/> <gmaps>....</gmaps>
Also you have to upgrade your API from v2 to v3. Because Google Map up to Version 2 required API Key.
Get more details on this link.

How to use google maps simple api on localhost

I have requested a link for embedding google maps on my website on
https://developers.google.com/maps/documentation/embed/start
and have authorized everyone with the link to use it
Referers: Any referer allowed
https://code.google.com/apis/console/
but I still receive a
The Google Maps API server rejected your request. This API project is not authorized
to use this API. Please ensure that this API is activated in the APIs Console:
Learn more: https://code.google.com/apis/console
Is there some other way to test my website locally with embedded google maps?
EDIT:
They say:
Easy embedding
Google Maps Embed API maps are easy to add to your webpage—just set the URL
you build as the value of an iframe's src attribute. Control the size of the
map with the iframe's height and width attributes. No JavaScript required.
but I still can't access the link.
The problem was that they have their "quick start" out of date.
https://developers.google.com/maps/documentation/embed/start
It says you should only provide them with your API key but the thing is that there is a new version of the same website which they don't have links to from their guide but which you get a link to elsewhere( I got offered when in "billing" )
The new service is called Cloud Console and I found the API on/off buttons there.
https://console.developers.google.com/project/...
You have to enable the "Static Maps API", "Google Maps API" and "Google Maps Embed API" and make sure to have your link in an iframe div
As Dominik said, go here:
https://console.developers.google.com/project/%your-project-name%/apiui/apis/library?q=google%20maps
Enable both APIs:
Google Maps Embed API
Static Maps API
Then go here:
https://console.developers.google.com/project/%your-project-name%/apiui/credential
Create New Key
Browser Key
And you're done.
I also had to enable the Google Maps JavaScript API.