google maps v3 marker info window on mouseover

Question

I have scoured stackoverflow and other forums including the google maps v3 api docs for an answer but I cannot find how to change the event that fires the marker info window from click to mouseover in the files I am working with.

I am working with a demo from the google library that includes a fusion table layer.

You zoom into the clusters and see the small red circle markers for locations. You have to click to reveal an info window. I wish to rollover to reveal the info window.

My demo is here: http://www.pretravelvideo.com/gmap2/

The functions.js file does most of the work here: http://www.pretravelvideo.com/gmap2/functions.js

Cranny

The event you're looking for is mouseover, does that not work for you? – Psych

I don't even see the infowindows appearing on click of your red markers – Burgoyne

Answer 1

Here's an example: http://duncan99.wordpress.com/2011/10/08/google-maps-api-infowindows/

marker.addListener('mouseover', function() {
    infowindow.open(map, this);
});

// assuming you also want to hide the infowindow when user mouses-out
marker.addListener('mouseout', function() {
    infowindow.close();
});

Burgoyne

And what if i want to copy some text from Infowindow? I want to infowindow stay opened as long as i have my mouse over marker OR infowindow itself... So mouseout listener on marker wont do it :( – Lautrec

@Lautrec change the mouseout event listener to be on the infowindow instead of the marker. – Burgoyne

this works for me, but what's the working behind it? how is 'this' getting the reference of the marker even though i have it in a for loop? – Eolian

@lostchild Good question. My understanding is that this is a reference to whatever object the event listener is attached to, i.e. it's a shorthand for the marker in this case. There's no real advantage in this example in using this instead of marker. However if you have an event listener function that could be attached to a variety of objects (e.g. if we used the same function here for mouseover on a polyline), it wouldn't make sense to refer to marker and the less-specific this would make more sense. – Burgoyne

Answer 2

var icon1 = "imageA.png";
var icon2 = "imageB.png";

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: icon1,
    title: "some marker"
});

google.maps.event.addListener(marker, 'mouseover', function() {
    marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
    marker.setIcon(icon1);
});

Chantress

Answer 3

Thanks to duncan answer, I end up with this:

marker.addListener('mouseover', () => infoWindow.open(map, marker))
marker.addListener('mouseout', () => infoWindow.close())

Marola