I was recently asked by a reader how to open an InfoWindow when a marker is hovered over, so I thought I’d add it here for anyone else with the same question.

As this is quite old, I use my plugin now. But this is still a good post for learning.

So hover is a CSS event, but it cannot trigger Javascript. What you want are HTML events, and specifically either mouseover or mouseenter events.

There are a few challenges though:

1. Normally, if you had access to the HTML element of the Marker like you do for an InfoWindow or Popup (ie something in the <template> tags), then you could use Vue to do this with the built-in @mouseover event (here is a more detailed explanation)
2. Google Map markers are added in with Javascript by Google Maps (not your app), so you have to rely on them to tell you when there is a mouse over the marker
3. Thankfully the marker Google Maps emits the events mouseover and mouseout

So to implement these, you can add a listener to the marker you created and make it $emit an event when it fires. Something along the lines of:

this.marker.addListener(‘mouseover’, this.$emit(‘mouseover’))
this.marker.addListener(‘mouseout’, this.$emit(‘mouseout’))

* You’ll notice evidence I had an event in when I wrote this tutorial because I forgot to remove the remove listeners code in the beforeDestroy() event

Now you should be able to listen to these new $emit events you’ve made where your markers are:

<map-marked :lat=“-27”
            :lng=“133”
            @mouseover=“openInfoWindow()”
            @mouseout=“closeInfoWindow()” />

I recommend reading Google Maps docs for Markers to get more ideas of how you can use them as the code I made is mostly the same as that but with some minor changes to make it work for Vue.