InfoWindow mouseover event?

2,330 views
Skip to first unread message

CSharp

unread,
Sep 14, 2010, 12:43:28 PM9/14/10
to Google Maps JavaScript API v3
I currently trying to make a mouse-over on a marker show an InfoWindow
stay up so that it can be "pinned" even after a mouse-out event has
occurred to try and close it. At first, you might think of just
adding a timeout event for the InfoWindow to close, but it's not as
easy as you might think. Here's what I need and I'm wondering if
there is a way to hook a mouseover event to an InfoWindow somehow
(tried to add a mouseover listener to the InfoWindow and nothing
happened):

1) Create a marker (called "oMarker")
2) attach mouseover event to oMarker using
google.maps.event.addListener to open InfoWindow, "oInfoWindow"
3) attach a mouseout event to oMarker using
google.maps.event.addListener to close the oInfoWindow
*4) (???)attach mouseover event to oInfoWindow to cancel mouseout
event so that the oInfoWindow stays open
*5) (???) attach onclick event to a pin image inside the oInfoWindow
so that the InfoWindow stays open indefinitely until the use closes
the InfoWindow by clicking on the "x" button on the top right corner.
This is doable, but only if #4 can be achieved.

#3 is what gets me because I want the InfoWindow to close on mouseout
so that it can be opened on another marker. But the thing is, I
cannot get a way to make the InfoWindow to stay open without putting a
setTimeout function call to make the InfoWindow to stay open long
enough for the user to pin the InfoWindow. As well, setting the
timout function call means that onmouseout of any marker, the
InfoWindow will stay up for a period of time before closing.

Any suggestions will be appreciated.

Esa

unread,
Sep 14, 2010, 2:08:06 PM9/14/10
to Google Maps JavaScript API v3
It is not very easy to construct any event listener to InfoWindow.
There is event.addDomListener() available but InfoWindow is a
structure of about twenty <div> blocks.

How about pinning the InfoWindow with marker 'click' event?

CSharp

unread,
Sep 14, 2010, 2:38:24 PM9/14/10
to Google Maps JavaScript API v3
I already added a click event listener to close the mouse-over
InfoWindow and open a "sticky" version in place of the mouse-over
one. The "sticky" InfoWindow basically stays up until the user closes
it by clicking on the "x" in the upper right corner of the InfoWindow.

The thing is, my users keep bugging me about having a popup that
functions exactly the way I described originally. It's like every
month or so, I get someone asking me to implement a pinnable
InfoWindow when a mouse-over a marker occurs. Then when a mouse-out
occurs, the InfoWindow is supposed to disappear immediately unless the
InfoWindow is pinned. I keep on telling the user (my clients) that
this is just not possible with the Google Map's InfoWindow. Can the
experts at Google agree with me on this or is there a way?

I'm currently exploring the option of making the mouse-out event set a
timeout delay long enough for the user to actually hover over the
InfoWindow. Within the InfoWindow, I'll try and capture the mouse-
over event of a div container and cancel out any close event from the
marker's mouse-out event listener. From there, hopefully, I can get
this to work. If anyone has a better suggestion, please post your
solution. Greatly appreciate it.

Thanks!

Nathan Raley

unread,
Sep 14, 2010, 3:00:47 PM9/14/10
to google-map...@googlegroups.com
Not to mention you can run into some issues when the user is moving the mouse from the marker to the InfoWindow to pin it.  That is the biggest issue I have heard of people discuss when trying to implement something like you are trying to do.  Because the MouseOut for the marker takes place when you mouse over the window to pin it.  So thus it would close it unless you implement a check if it is over the InfoWindow.

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.


Reply all
Reply to author
Forward
0 new messages