GMarker onmouseout event fired too soon

Question

Here's the situation:

On my Google Map, I'm trying to open an html info window whenever the user moves its mouse over a GMarker. This window should be closed when the pointer is out of the marker.

GEvent.addListener(my_marker, "mouseover", function() {
  MaCarte.openInfoWindowHtml(new GLatLng(my_marker.getLatLng().lat()+0.002, my_marker.getLatLng().lng()+0.001),"some text");
});

GEvent.addListener(my_marker, "mouseout", function() {
  if((MaCarte.getInfoWindow().getPoint().lat() == my_marker.getLatLng().lat()+0.002) 
      && (MaCarte.getInfoWindow().getPoint().lng() == my_marker.getLatLng().lng()+0.001))
    MaCarte.closeInfoWindow();
});

What happens is that the onmouseout event is fired too soon, so the info window opens and closes right after it.

My guess is that the mouse no longer is over the marker but over the info window causing the onmouseout to be fired.

How can I do to let the info window open until my pointer is actually out of the marker?

Answer 1

I would use a timer and variable that dictates whether it's ok to close the window. Basically, have a timer start in the mouseover event and that timer changes a variable. The mouseout event then only closes the window if it's ok to close

like

GEvent.addListener(my_marker, "mouseover", function() {
  timer.start()
  MaCarte.openInfoWindowHtml(new GLatLng(my_marker.getLatLng().lat()+0.002,  my_marker.getLatLng().lng()+0.001),"some text");
});




GEvent.addListener(my_marker, "mouseout", function() {
  if (okToClose){
    if((MaCarte.getInfoWindow().getPoint().lat() == my_marker.getLatLng().lat()+0.002) 
        && (MaCarte.getInfoWindow().getPoint().lng() == my_marker.getLatLng().lng()+0.001))
      MaCarte.closeInfoWindow();
  }
});

This doesn't directly answer your question, but it will work as a workaround.

Hope it helps!

Chris

Answer 2

One thing that can happen is that opening a Google infowindow can cause the map to pan in order for the whole of the infowindow to be visible in the viewport and not obscured by any of the controls. The pan motion can cause the marker to move out from underneath the mouse, causing a mouseout. One way to deal with that effect is to use the undocumented {suppressMapPan:true} option on your infowindow. Another way to deal with it is to use a non-Google infowindow that doesn't pan the map.

Another thing that can happen is that you might have an incorrectly designed custom GIcon. If the .infoWIndowAnchor is too low, the infowindow itself could steal the mouseover, causing a mouseout on the marker. You can deal with that by setting the y coordinate of the .infoWindowAnchor more negative.

However, when you get it all working, you'll probably find that a map that opens the infowindow on marker mouseover is awkward to use. You get a better user interface, and one that some users will already be familiar with, by only displaying a small tooltip on mouseover, and only displaying the full infowindow when the marker is clicked.

Answer 3

It happens in other areas of JavaScript/HTML also.

Sometimes you have to bind a handler to an event but only after handled the current one because it gets called immediately...

So instead of

GEvent.addListener(...);

I do

setTimeout(function() { GEvent.addListener(...); }, 1);

To give the current thread the time to finish up handling the current event.

Hope this helps.