vue-google-maps icon indicating copy to clipboard operation
vue-google-maps copied to clipboard

Adding event listener to child element of InfoWindow

Open RandelSandel opened this issue 8 years ago • 9 comments

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?

RandelSandel avatar May 03 '16 22:05 RandelSandel

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

GuillaumeLeclerc avatar May 05 '16 08:05 GuillaumeLeclerc

Awesome! Thanks for the consideration and this great package. If I figure it out I'll let you know.

RandelSandel avatar May 06 '16 22:05 RandelSandel

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.

francisortega avatar Jun 13 '16 18:06 francisortega

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

lesion avatar Jun 14 '16 10:06 lesion

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

GuillaumeLeclerc avatar Jun 14 '16 15:06 GuillaumeLeclerc

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 ?

lesion avatar Jun 15 '16 15:06 lesion

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.

GuillaumeLeclerc avatar Jun 15 '16 15:06 GuillaumeLeclerc

I've managed to make it works (but only using child slot, not with :content prop). lesion@9a6c0bcba2fc4317f2cffd7e88aaa7d63c9a3ecf

lesion avatar Jun 15 '16 16:06 lesion

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

ethanclevenger91 avatar Oct 31 '16 18:10 ethanclevenger91