How to load google maps javascript api ?

Vaadin 6 / 7 / 8
1

Hello,

I am evaluating Vaadin 7 for a new project that needs to embed google maps with the google maps javascript api.

I have tried to make a component which extends AbstractJavaScriptComponent and tried to load the library by added:


@JavaScript({ “https://maps.googleapis.com/maps/api/js?sensor=false” })

But when I run the application, it can not load the google library:


Load denied by X-Frame-Options: https://maps.googleapis.com/maps/api/js?sensor=false does not permit cross-origin framing.

Is there a way to load this library in Vaadin 7.

Best regards,

Cedric

2

I have encountered the same problem, anyone have some idea?

3

I faced with this problem and resolved by adding google maps js library dynamically to dom content with callback google maps parameter:
Example in this thread:

https://vaadin.com/forum#!/thread/2971952/2975500

4

Thanks Łukasz, It really works, cool!

5

Hi Łukasz,

I tried your solution. The problem is that I am not using pure Javascript. I am integrating a GWT widget. I tried to call directly to the javascript code that you suggest in the constructor of my children class


        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&'
                + 'callback=initialize';
        document.body.appendChild(script);

But it doesn’t work.

Guys of Vaadin. Do you know why can’t we simply load it with the @JavaScript annotation?

Cheers!

Sergio

6

This is exactly what the error message says: Google has set an X-Frame-Options header that instructs compliant browsers to refuse to load the script in a cross-origin iframe. It seems this is only a problem if the Vaadin application is loaded inside an iframe, and in that case I don’t know of any good workaround as that problem is not in any way related to Vaadin or the @JavaScript annotation.

The reason for this problem is that the script uses document.write to inject another script tag that loads the rest of the library. document.write does however not work after the page has been loaded; older browsers just produce a blank page whereas newer browsers ignore the call and just display a warning in the javascript console. The easiest way of working around this problem is probably to include the script in the initial HTML. You can use something similar to
https://vaadin.com/wiki/-/wiki/Main/Customizing%20the%20startup%20page%20in%20an%20application
 for adding a suitable script tag to the HTML that loads the Vaadin application.

7

It worked!!

Thank you Leif.

Sergio

8

Very nice solution,but after reading everything u have given and change some links like the package name,I still get this error:

Could not initialize JavaScriptConnector because no JavaScript init function was found. Make sure one of these functions are defined:
de_upb_cik_rescueLab_vaadin_GMap
com_vaadin_ui_AbstractJavaScriptComponent
com_vaadin_ui_AbstractComponent
com_vaadin_server_AbstractClientConnector

Do u know why this happens to me ?Thx.

9

Check the path to the java class at the top of your connector java script. That has to match the package path and class name exactly.

10

There are two likely causes of this problem:

  • The javascript file that contains the de_upb_cik_rescueLab_vaadin_GMap function is not loaded. You can use the the Net panel in e.g. Firebug to check for this.
  • The javascript file is loaded, but it contains some syntax error that causes the browser to ignore it. You can use the the Console panel in e.g. Firebug to check for this.
11

I came across this post and it came in very useful for integrating Gmaps with Vaadin 7. But I noticed that the shared state communication doesn’t actually work; The on click method gets called normally on the server but when setting the state from the server side, nothing reaches the browser. I was trying to find out what was actually happening and finally, when I printed out the GMap object instances, I amazingly noticed that there were two of them! One which received the onClick method messages (a GMap$1 inner class instance) and my normally initialized instance for adding to the layout (a GMap instance),

Can anyone explain this? My GMap consturctor is called only once but there are two objects (outer and inner), so the second one must have been created by Vaadin. How can I overcome this?

Thanks in advance
mantesat