Vaadin dialog and google map marker

Flow
1

Hi,

I’ve got an error which I can’t explain.
I want to use google map + google map marker inside a vaadin dialog (I also tried leaflet map and leaflet marker and I’ve got also some issues).

I will explain my test case (I tried to remove all useless stuff around this)
I create a component ExampleTemplate (template in html) with google-map + marker.
I create a view (template in html) with 2 buttons:
→ 1st button: Open a vaadin-dialog templated html
→ 2nd button: Open a vaadin-dialog templated in JAVA (ExampleTemplate included)

When i click on “Show dialog” it’s working (i removed api-key in my example but there is the same bug). I close the dialog and re-open it. It’s working.

When i click on “Show dialog2” it’s working (the 1st time). I close the dialog and re-open it. It’s not working.

There is an error Cannot read property ‘click’ of undefined “google-map-marker.html:470”

I create a sample app here ( https://github.com/jcgueriaud/test/blob/master/src/main/java/com/gmail/jeanchristophe/PopupMapView.java ) and run it here: https://date-tester-vaadin10.herokuapp.com/popupMap

Do you have any idea ?

Thanks

2

I think I don’t explain what i want to do. I would like a google map + marker inside a form (I created an app from Full stack spring) as the form is opened inside a dialog I’ve got this problem.

I tried to remove all the unnecessary code.

I don’t understand how the dialog works. For example, if the components inside the dialog template are created after opening or if it’s created the 1st time then “reused” the 2nd time …

3

Hello.

This looks like the issue we should fix, thank you for reporting.
I’ve created a ticket here: https://github.com/vaadin/flow/issues/4374 please subscribe to see the progress.

4

Hi,

Thanks for reporting this issue. I was not sure if it’s a problem of vaadin flow ou dialog or dialog-flow (or me :slight_smile: ) ?

I subscribed to the issue :wink:

5

Just in case, will post it here also: https://github.com/GoogleWebComponents/google-map/issues/407 a google-map component behavior seems to be the root cause.

There is a PR with fix already in the same repo: https://github.com/GoogleWebComponents/google-map/pull/408/files
but it’s still not merged.

6

Thanks for the investigation.

I will check this the pull request.
I saw this in the bug : “When there are multiple google-map with markers on different pages an error is thrown when showing the second map.”

I don’t understand how vaadin-dialog is working. In Java dialog is created once (its content is created once) but in the view google-map component is created twice ? (and the old one is not “destroyed”)

I don’t “want” to create 2 google-map + marker. Is it possible to create one component (so I won’t have the google-map bug) ?

7

You’re absolutely right, the Java dialog and html dialog is created once only.
What dialog does is basically adding/removing of its contents to the DOM (html): when you open it, it adds on the page a special thing called overlay (https://github.com/vaadin/vaadin-overlay/) with the contents you’ve added to the dialog.
And when you close the dialog, the overlay gets removed from the dom.

What makes it more complicated here, is the fact that the dialog actually contains a custom element.
When a custom element is added to the DOM, some JavaScript logic should be executed to make it look and work like the actual WebComponent, otherwise instead of the map only an empty tag will be displayed.

In this case, https://github.com/Oupsla/google-map/blob/aa3cf2906e48464c63a96ad85da7962fee911778/google-map-marker.html#L173 observer gets called when we reattach the map back to the DOM. This leads to the erroneous function being called eventually.

The only way I can think of is to “hide” (https://www.w3schools.com/tags/att_global_hidden.asp) the map component instead of showing it in the dialog.

8

I can use google-map + marker inside a vaadin-dialog tag in html (my first button) but with Java it’s not working.

My 2 vaadin-dialog use vaadin-overlay but some javascript should be executed in Java but not in HTML ?

I saw 1 big difference between my 2 examples (HTML and JAVA):

  • When you open my page https://date-tester-vaadin10.herokuapp.com/popupMap , there is no google-map inside my dom
  • If I open dialog with the 1st button, there is a google-map. When I close it, it’s still there
  • If I open dialog with the 2nd button (after refeshing the page), there is a google-map. When I close it, there is no google-map (but some observers on a ghost google-map)

So the error message is a google-map bug but the unclean observer is a bug from which component ?

Thanks for your answer (it’s not easy to understand the difference of behaviour between these 2 cases)

9

The main difference is that on the second case, there’s a webcomponent in between the overlay and the actual map: a <flow-component-renderer>. This component is needed to allow the Java server to keep track of the rendered components on the client-side, when those components are created via the Polymer templating (which is the case for content inside Dialogs).

That shouldn’t change anything in the behavior of the rendered components, but it seems it does. There’s also this ticket that can be related to this: https://github.com/vaadin/vaadin-date-picker-flow/issues/96

Unfortunately I don’t have an immediate fix or workaround for this situation, other than using what you are already using (creating the Dialog from the template instead of from Java). We need to investigate further what is causing the different behavior.

10

Hi,

Yes I knew this date-picker issue (I opened it). It’s quite hard to use vaadin features and have this kind of issues (especially to be sure that I don’t code that weird behaviour then look for a workaround).

I think I will avoid vaadin dialog for some times (at least when I try custom field or some new vaadin 10 cool features).

Thanks for your answers, I will follow updates for vaadin-dialog project closely :wink: