Bug: GvmInfoWindow components are not removed from the map

[Tuhtarov]

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.

To reproduce

For example, we have a display of 3 markers and 3 windows above them. After deleting any element from the storage, the marker and the window must be deleted from map. Currently, only the marker is deleted. But the window remains on the map.

Demo code roughly describing my component for displaying some data on a map:

<template>
  <GmvMap
      ref="gmvMap"
      map-id="DEMO_MAP_ID"
      :map-key="'MainMap'"
      style="width: 100%; height: 100%"
  >
     <template #visible>
          <div v-for="(marker) in markersStore.stack" :key="`k${marker.id}`">
              <GmvMarker
                :position="marker.position"
                :marker-key="`marker${marker.id}`"
                :map-key="'MainMap'"
              />

              <GmvInfoWindow
                :map-key="'MainMap'"
                :marker-key="`marker${marker.id}`"
                :info-window-key="`infoWindow${marker.id}`"
                :opened="true"
                :position="marker.position"
              >
                  <div class="pa-2" @click="popStack">
                      some content
                  </div>
            </GmvInfoWindow>
        </div>
     </template> 
  </GmvMap>
</template>

<script setup lang="ts">
// ...
// pinia store 
const markerStore = useMarkerStore()
const popStack = () => markerStore.stack.pop()
</script>

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.

Additional context

Using this crutch code, you can close these windows on the map

watch(
  () => markersStore.stack,
  (val) => {
    val.forEach((marker) => {
       useInfoWindowPromise(`infoWindow${marker.id}`).then((infoWindow) => infoWindow?.close())
    })
  },
  { deep: true },
)

Screenshots

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]]

Branch issue-323-Bug_GvmInfoWindow_components_are_not_removed_from_the_map created!

[diegoazh]

@Tuhtarov thank you again. I found a logical issue here, and now it's working as expected. I'm closing the issues considering it solved, feel free to re-open it if needed or open a new one.

[Tuhtarov]

And thank you again :)

[Tuhtarov]

@diegoazh, hello again! I tested it and found that the bug remained :(

[Tuhtarov]

[diegoazh]

Hi @Tuhtarov I checked and it works as expected, you can check it in this stackblitz example.

1. click the marker on the first map
2. an info window should be displayed
3. after 3 seconds the marker is removed with a v-if and the info window is closed.

Please check the implementation on the HellowWorld component, I think your issue can be related to your implementation, let me know if you found something weird or new.

[Tuhtarov]

Hi @diegoazh, I appreciate your work and look forward to your response. I made an example based on a 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.