Closing other `<InfoWindow>`

[ralbear]

Hi

I have few markers with a <InfoWindow> on it. How can I close the open <InfoWindow> when I click on the map or open other <InfoWindow>?

Thanks :)

[HusamElbashir]

Hi @ralbear

You'll have to manually control the info windows through refs.

[ralbear]

Thanks for the response, will give a try!

[ralbear]

I give a few tries to this but can't find a working approach, is there any similar example I can base on? I try to find it few times without luck. Thanks in advance!

[ssantss]

friend after trying to solve your same problem this is my solution I hope it can help you.

[ssantss]

<InfoWindow :ref="(el) => (infoWindows[i] = el)"> This line uses an anonymous function to assign each InfoWindow to an element in the infoWindows array at their corresponding index. The reference of each InfoWindow is stored in the infoWindows array so that we can access them later.

const infoWindows = ref([]); This line creates a reactive array called infoWindows that will store the references to the InfoWindows.

const clickMarkerEvent = (i) => { closeInfoWindows(i); }; The clickMarkerEvent function takes the index of the marker . It then calls the closeInfoWindows function passing in the index of the marker.

const closeInfoWindows = (i) => { infoWindows.value.forEach((ref, index) => { if (index !== i) { ref.infoWindow.close(); } }); };

The closeInfoWindows function closes all InfoWindows except the one at the provided index i. This is achieved by iterating through all the InfoWindow references stored in infoWindows and closing each of them except the one at index i.

This solution takes into account the opening of InfoWindows and closing of others when clicking on a marker. It also closes all InfoWindows when clicking anywhere on the map, as it still uses the @click="closeInfoWindows" event on the GoogleMap component <GoogleMap @click="closeInfoWindows" >

[ralbear]

@ssantss This works perfect at first attempt! Muchas gracias!😃

[lhovee]

<InfoWindow :ref="(el) => (infoWindows[i] = el)"> This line uses an anonymous function to assign each InfoWindow to an element in the infoWindows array at their corresponding index. The reference of each InfoWindow is stored in the infoWindows array so that we can access them later.

const infoWindows = ref([]); This line creates a reactive array called infoWindows that will store the references to the InfoWindows.

const clickMarkerEvent = (i) => { closeInfoWindows(i); }; The clickMarkerEvent function takes the index of the marker . It then calls the closeInfoWindows function passing in the index of the marker.

const closeInfoWindows = (i) => { infoWindows.value.forEach((ref, index) => { if (index !== i) { ref.infoWindow.close(); } }); };

The closeInfoWindows function closes all InfoWindows except the one at the provided index i. This is achieved by iterating through all the InfoWindow references stored in infoWindows and closing each of them except the one at index i.

This solution takes into account the opening of InfoWindows and closing of others when clicking on a marker. It also closes all InfoWindows when clicking anywhere on the map, as it still uses the @click="closeInfoWindows" event on the GoogleMap component <GoogleMap @click="closeInfoWindows" >

this approach worked for me! ChatGPT gave me the approach of conditionally displaying info windows based on a ref of marker.id

That approach required a double click on markers to get the window to open. Probably some kind of race condition setting the info window marker id ref after the info window is set to display.

Thank you @ssantss !