Maps LeafLet/Google Map

How to add a Map in Java in Vaadin10???

GoogleMap googleMap = new GoogleMap("apiKey", null, "english");
googleMap.setSizeFull();
googleMap.setMinZoom(4);
googleMap.setMaxZoom(16);
//add(googleMap); THIS DOES NOT WORK GMap is not a compnent it seems for Vaadin 10

Tabs tabs = new Tabs(tab1, tab2, tab3);
Div pages = new Div(d1, d2, d3);
add(tabs); //THIS WORKS FINE
LMap leafletMap = new LMap();
leafletMap.setCenter(60.4525, 22.301);
leafletMap.setZoomLevel(15);		
// add(leafletMap); THIS DOES NOT WORK EITHER....LMap is not a compnent it seems for Vaadin 10

There is no Google Maps add-on for Flow yet, i.e. no Java wrapper. However Google Maps webcomponent is available already

https://vaadin.com/directory/component/googlewebcomponentsgoogle-map

Next step would be to create Java wrapper using this component

We have step by step documentation starting here:

https://vaadin.com/docs/v10/flow/web-components/integrating-a-web-component.html

It depends:
If you have html templates, you can add a web component (for example google-map) and map the attribute (for example latitude, longitude, apikey) to Java.

If you don’t use HTML templates then you can create your googlemap (java) component.

You can also use other map web component (googlemap component has bugs, I don’t know if there are some good map web components :confused: )

If you add some details (what you need to display on you map) then perhaps my answer will be more accurate :slight_smile:

Tatu Lund:
There is no Google Maps add-on for Flow yet, i.e. no Java wrapper. However Google Maps webcomponent is available already

https://vaadin.com/directory/component/googlewebcomponentsgoogle-map

Next step would be to create Java wrapper using this component

We have step by step documentation starting here:

https://vaadin.com/docs/v10/flow/web-components/integrating-a-web-component.html

Yeah I have been grappling with the wrapper (i.e. reinventing the wheel) for my project that just needs to display maps and allow interaction with a marker.
I am thinking of dumping V10 and maybe go with Angular.js or maybe…maybe V8

Jean-Christophe Gueriaud:
It depends:
If you have html templates, you can add a web component (for example google-map) and map the attribute (for example latitude, longitude, apikey) to Java.

If you don’t use HTML templates then you can create your googlemap (java) component.

any example of the said template use ?

You can also use other map web component (googlemap component has bugs, I don’t know if there are some good map web components :confused: )

If you add some details (what you need to display on you map) then perhaps my answer will be more accurate :slight_smile:

Leaflet would be my preference but there is no support in V10. I am wondering what the point of V11 is when
there is no support for such an important component in V10.

Here you’ve got a simple example of how to integrate a map with markers.

https://github.com/jcgueriaud/map-project-example

When I’ve got some time, I will add an example with some other web components.

It’s quite easy to do simple stuff (or some advanced) with existing map components + Vaadin 10.

Could not believe how easy it is to use (well documented) WebComponents with Vaadin Flow:

https://github.com/bachlge/flow-google-map

Much appreciated. I am looking into to it now.

peter voland:
Much appreciated. I am looking into to it now.

messed up my 2 projects: google maps & google charts => the idea is the same
(trying to clean up …)

no worries…that minor mess up is not a problem …that is fine…those are great examples simple hands on examples that should make it into Vaadin tutorial and documentation. great sensible hands on use of flow in a very manageable size requiring short attention span(believe it or not by my 5yo kid is using vaadin and he said it was FINE and he gets it).I think examples should be manageable and quick to grasp. the ones you posted are great.

cleanup done:

https://github.com/bachlge/flow-google-map

https://github.com/bachlge/flow-google-chart

inspired by this one:

https://github.com/mikotin/google-signin

excellent examples.

How to add polyline to the map?

Georg Bachl:
Could not believe how easy it is to use (well documented) WebComponents with Vaadin Flow:

https://github.com/bachlge/flow-google-map

I have found solution: https://github.com/GoogleWebComponents/google-map/issues/411
There is bug with polyline. I copypaste this fixed google-map-poly.html to webapp/frontend folder in my project and it works.