vue-google-maps
vue-google-maps copied to clipboard
Adding event listener to child element of InfoWindow
How can we add an event listener to the child elements of InfoWindow
?
A non Vue solution: http://stackoverflow.com/questions/5416160/listening-for-the-domready-event-for-google-maps-infowindow-class
Is there a vue way of doing this?
I'll have to look at this. I think there is way to pass a dom element to a info window. It might be working too. Maybe vue would still be able to modify it if the google library does not make a deep clone of the given DOM element
Awesome! Thanks for the consideration and this great package. If I figure it out I'll let you know.
I have a question that's related to this I guess. Is there a way to retrieve a data inside an info-window? My sample code:
<marker 'params...'>
<info-window 'params...'>
<input v-model="MyData">
</info-window>
</marker>
It seems that MyData doesn't get updated when changed inside the input box. However if for example it has a set value (eg. MyData: 'Hello World') and I use {{MyData}} inside the info-window, it will display it. Is the a two-way issue? How can I achieve retrieving it? Thanks.
Same issue here! Don't know why but when using components inside InfoWindow, strange things happens ! Vue's events not working too:
<marker 'params....'>
<info-window 'params...'>
<button @click="testHandler">
</info-window>
</marker>
and inside InfoWindow this
is not binded to component.
Thanks
It is because vue-google-maps
is cloning the content of InfoWindows inside the map. This is why two way data bindings and events does not.
I don't have time to implement this nor I can guarantee it is doable at the moment.
If you have time pull requests are welcome
mmmmm as you sad, there's a way to pass a DOM element to infoWindow content, but this is what you are doing here I think, so google maps probably does a deep cloning of it (not checked this). Don't know how to proceed here, probably with the Vue's $compile of the element ?
No as you can see few lines before el
is not this.$el
, is a deep cloned version of this.$el
. Maybe it would work by passing this.$el
but I think it was not working. There was a post about it on vue forum if I remember well. There was another hack to make it work.
I've managed to make it works (but only using child slot, not with :content prop). lesion@9a6c0bcba2fc4317f2cffd7e88aaa7d63c9a3ecf
On a Vue component, you can use the $compile
method to make Vue aware of your newly created DOM elements. See this answer, though a comment does say this is no longer available. Not sure if by "new version" they mean 1.0 or 2.0. Trying it out now, but having trouble building the library re: #113