CODEWITHSUNDEEP
google-mapsvuejs2infowindow
Benny
Benny

Reputation: 879

Close infowindow when mouseout

How can I hide the infowindow when I leave it? I want to be able to hide it as soon as the mouse leaves the infowindow. I am using this vue package here: https://github.com/xkjyeah/vue-google-maps/issues/428

I tried it with something like this:

this.$nextTick(function() {
  self.$refs.gmap.$mapPromise.then(function(map){ // ensures that map 
                                                  object is ready and exists
    google.maps.event.addListener(self.infoWindow, 'mouseout', // self.infoWindow is infoWindow instance, 
                                                                  I am only using one and change content
    function(){
      self.infoWindow.infoWinOpen = false; // way of vue-google-maps 
                                              to close 
                                              infowindow
    });
  });
});

This doesn't work, when I try to apply it directly to the marker instead it only applies to the marker when I mouseout but not to the infowindow, that means that as soon as I leave the marker and want to move to the infowindow, the infowindow closes. Can anyone tell me how to close the infowindow as soon as I leave with the mouse out of the window?

Upvotes: 0

Views: 613

Answers (1)

Un1
Un1

Reputation: 4132

If you want something to hide when the mouse leaves it, just add a @mouseleave listener to the element.

Is that what you're trying to do?

Codepen: https://codepen.io/x84733/pen/GGYwEg?editors=1010

<div @mouseleave="hide = true" v-if="hide == false"></div>

...

data: () => ({
  hide: false
})

Upvotes: 1

Related Questions