search

diegoazh / gmap-vue

A wrapper component for consuming Google Maps API built on top of Vue. Fork of the popular vue-google-maps plugin.
https://diegoazh.github.io/gmap-vue/
173 stars 51 forks source link

Bug: GvmInfoWindow components are not removed from the map (repeat) #327

Closed Tuhtarov closed 2 days ago

Tuhtarov commented 6 months ago

Hi @diegoazh, I appreciate your work and look forward to your response. I made an example based on your project on stackblitz where you can clearly see that InfoWindow components are not deleted after they are removed from the data source. After clicking on the text in InfoWindow, check the log in the console. In theory, the marker and window should be deleted on the map together, but only the marker is deleted.

Originally posted by @Tuhtarov in https://github.com/diegoazh/gmap-vue/issues/323#issuecomment-2097371502

Describe the bug

GvmInfoWindow components are not deleted (not closed) in a vue template when the object responsible for rendering this component is deleted in a reactive variable.

Expected behavior

The marker and window should be removed from the map if the element responsible for drawing the marker and window was deleted in the data source.

Current behavior

Only the marker is removed, the window remains.

Desktop

OS: windows 10 Browser chrome (123.0.6312.123)

Versions

Node: v20.11.1 NPM: 10.2.4 VUE: 3.4.21 VITE: 5.2.0

Package manager

NPM

Plugin version

2.1.1

create-issue-branch[bot] commented 5 months ago

Branch issue-327-Bug_GvmInfoWindow_components_are_not_removed_from_the_map_repeat created!

DartVadius commented 4 months ago

Any progress?

diegoazh commented 2 days ago

Hi, sorry for the delay, I was working hard and too busy.

The issue is not specifically related to the InfoWindow component. It is related to Vue's reactivity and how it works.

How the marker is removed and InfoWindow is part of the marker's slot, any change is passed to the opened prop of the InfoWindow; and how the InfoWindow is an independent instance/object, it continues being displayed with the same info.

Also, don't forget that this plugin is a wrapper over the Google Maps library. When you remove the marker, the marker object is removed, the component removes the real Google Map marker, but the InfoWindow component is removed, and any of its methods are executed to update the real Google Map info window.

To implement the expected behavior, you need to use a property that you can change and pass to the InfoWindow object. In that case, Vue can detect the change, wait until the change is applied to the UI, and then with nextTick remove the marker.

I updated your example to get the expected behavior. Also, I replaced ref with reactive and an object to avoid common reactivity issues in Vue v3; you can read more here. And the example lives here.

I'm closing this issue, feel free to reopen it if something else happens.

Note: Despite that, I will add a beforeUnmounted hook to close the info windows when the component is unmounted in the next version of the component 😉.