I'm interested in putting a Google Map in a Vaadin 14 (in a PWA app). I have seen that there are many addons for Vaadin 8, obviously not working with Vaadin 10+. Looking around, I have not found anything and then I ask you if there is any addon already ready? I also saw the web component (https://vaadin.com/directory/component/googlewebcomponentsgoogle-map). I have never touched the world of Polymer, only Java. I was wondering: if I wanted to use it, how to start using it in a Vaadin 14 UI? A small demo or example, if possible. I searched in the Vaadin guides but I didn't understand much.
1 Answers
Your question is too broad to give exact technical answers here, but I can list resources to explore.
There is a discussion at Vaadin Forum about integrating that web-component, and you can find pointers to GitHub examples https://vaadin.com/forum/thread/17235558/maps-leaflet-google-map There is also some additional comments about it here https://vaadin.com/forum/thread/17842727/getting-started-with-vaadin-14-and-google-maps
However there is one major issue with that web-component. It is made for Polymer 2 so you could use it only in the Vaadin 14 compatibility mode, and in npm mode it is not available. The component is not maintained and there is no Polymer 3 version available as npm loadable resource.
So there is another approach, i.e. use the same JavaScript library and API that was used in Vaadin 8 add-on. There is indeed a community project for this. I have not tested yet, but is interesting. You can find more on this forum page.
Related