Search code examples
google-mapsgoogle-apizk

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


Solution

  • There is a new version of gmaps just released

    Try this version : 3.0.4. https://www.zkoss.org/download/zkgmaps