How to include simple javascript in vaadin?

I'm trying to embed a simple javascript googlemaps code in vaadin, from https://developers.google.com/maps/documentation/javascript/examples/map-simple

This is what I tried, but I don't see any map on my page:

@JavaScript({
    "https://maps.googleapis.com/maps/api/js?v=3.exp"
})
@StyleSheet("vaadin://maps.css")
@SpringUI
public class VaadinUI extends UI {
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        Label maps = new Label();
        maps.setId("map");
        maps.setHeight("80%");
        maps.setWidth("80%");
        setContent(maps);
        
        com.vaadin.ui.JavaScript.getCurrent().execute(
                 "var map;"
                + "function initialize() {"
                + "map = new google.maps.Map(document.getElementById('map'), {"
                +   "zoom: 8,"
                +   "center: {lat: -34.397, lng: 150.644}"
                + "});"
                + "}"

                + "google.maps.event.addDomListener(window, 'load', initialize);"
        );
    }
}

Hi, the problem is that the example is set to call the initialize function on window load. However, in Vaadin when the javascript you send from the server is executed the window has already loaded, so the function is never invoked. The solution is simple, just create the map object directly:

@JavaScript({
    "https://maps.googleapis.com/maps/api/js?v=3.exp"
})
@StyleSheet("vaadin://maps.css")
@SpringUI
public class VaadinUI extends UI {
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        Label maps = new Label();
        maps.setId("map");
        maps.setHeight("80%");
        maps.setWidth("80%");
        setContent(maps);
        
        com.vaadin.ui.JavaScript.getCurrent().execute(
                "new google.maps.Map(document.getElementById('map'), {" +
                "    zoom: 8," +
                "    center: {lat: -34.397, lng: 150.644}" +
                "});"
        );
    }
}

Really great, that works. Thank you!

However, I'm now trying to create a simple JS component out of this, to pass lateron the lat/lng via state. But the following does not work:

public class VaadinUI extends UI {
    protected void init(VaadinRequest vr) {
            MapsComponent maps = new MapsComponent();
            maps.setId("map");
            setContent(maps);
    }
}

@JavaScript({
    "http://maps.googleapis.com/maps/api/js?v=3.exp"
    "vaadin://js/maps.js",
})
@StyleSheet({ "vaadin://maps.css" })
public class MapsComponent extends AbstractJavaScriptComponent {
    public GoogleMapsComponent() {
        callFunction("mapsfunction");
    }
}

maps.js:
my_package_MapsComponent = function() {
    this.mapsfunction = function() {
        alert("JS works at least");

        new google.maps.Map(document.getElementById('map'), {
                   zoom: 8,
                   center: {lat: -34.397, lng: 150.644}"
         });
    };
};

Result: I can see the JS alert, but no map is shown.

Hello,

Did you try setting the size for your new javascript component? Does the component appear in the dom?

Regards,
Matti
 

Yes the div tag is present in the dom, and I can see it takes the full space of the page. Just it has no content, no map.

Try removing the extra quotation mark in case you really have it in your code (at line starting with: center)

Also,

If you are aiming to integrate google maps into your application, you might want to have a look at:

https://vaadin.com/directory#!addon/googlemaps-add-on

-Matti
 

You can also check what your Javascript connector is doing in Firebug, Google developer console, etc. in the source/Javascript/whatever it is called tab. There you should also be able to set Breakpoints and inspect variables.

That was a type from copypaste above.
I definitely do not want to rely on an addon. Addons are often discontinued, and I just need the basic ability to show the gmap.

Furhter, I also want to understand how it works, as I may integrate furhter map solutions like openstreetmap.

I'm sure it's possible somehow, as @Johannes Dahlström already pointed out how the JS code would work when executing it from the server side.

I fixed it using `http://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize`. Don't know why this callback is required, but at least it works.

Sure it is possible - just wanted to make sure that you are aware of the add-on. Just try the inspector in your browser as Marius suggested and see where things go wrong. Working with the breakpoints should be really sraightforward in case of pure javascript components like this.