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

The event you're looking for is mouseover, does that not work for you? — Mano Marks, Jan 19 '12 at 06:33
I don't even see the infowindows appearing on click of your red markers — duncan, Jan 19 '12 at 17:07

duncan · Accepted Answer · 2015-11-12T13:36:15.477

160

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();
});

edited Nov 12 '15 at 13:36

answered Jan 19 '12 at 17:02

duncan

31,401
13
78
99

4

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 :( – Kedor Sep 24 '15 at 13:27
@Kedor change the mouseout event listener to be on the infowindow instead of the marker. – duncan Sep 24 '15 at 16:33
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? – some_groceries Jul 20 '16 at 06:55
1

@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. – duncan Jul 20 '16 at 07:10

score 9 · Answer 2 · answered Apr 07 '14 at 11:25

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);
});

score 5 · Answer 3 · answered Jul 22 '17 at 20:16

5

Thanks to duncan answer, I end up with this:

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

answered Jul 22 '17 at 20:16

Damjan Pavlica

31,277
10
71
76

google maps v3 marker info window on mouseover

3 Answers3

Linked