delaying Google map event for mouseover on markers

2,367 views
Skip to first unread message

CSharp

unread,
Jul 26, 2010, 2:34:48 PM7/26/10
to Google Maps JavaScript API v3
Is there a way to delay a mouseover event from occurring? With this,
I don't mean setTimeout and call some anonymous function or some other
function after a certain time has elapsed. The setTimout only delays
and shifts all functionality to another open queue time. So, in the
end, the Infowindow will pop up after the timeout setting has lapsed.

What I want is as follows:

1) A user will use the mouse pointer and may have inadvertently mouse
over a marker, especially in a location where there are tightly packed
markers in an area.
2) The marker will have a 1 second elapsed time to respond to open an
InfoWindow, but if it is less than that one second and the mouse
pointer is off the marker (mouseout), the Infowindow does not open.
3) So, if the user decides to open the InfoWindow to view some info on
the marker, the mouse pointer will be on the marker for at least 1
second in order for the InfoWindow to pop up.

Can this be done and how (if possible)?

Rossko

unread,
Jul 26, 2010, 3:31:07 PM7/26/10
to Google Maps JavaScript API v3
> Can this be done and how (if possible)?

Use setTimeout.
The trick is to reset a timer upon mouseout event occuring inside your
'settling time', so that the timeout never expires to triggers the
infowindow.
http://www.akxl.net/labs/articles/handling-events-in-javascript---from-basics-to-best-practices/

CSharp

unread,
Jul 26, 2010, 6:31:50 PM7/26/10
to Google Maps JavaScript API v3
Awesome! I should have thought about the clearTimeout and the
mouseout event.

Thanks!
> infowindow.http://www.akxl.net/labs/articles/handling-events-in-javascript---fro...

ايميلي يتحدى الملل

unread,
Jul 26, 2010, 6:32:28 PM7/26/10
to google-map...@googlegroups.com

 
> Date: Mon, 26 Jul 2010 15:31:50 -0700
> Subject: [Google Maps API v3] Re: delaying Google map event for mouseover on markers
> From: aliquis...@gmail.com
> To: google-map...@googlegroups.com
> --
> 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.
>


Hotmail: بريد إلكتروني موثوق فيه ويتمتع بحماية Microsoft القوية من البريد العشوائي. اشترك الآن.

Federico Ulfo

unread,
Jul 26, 2010, 4:22:00 PM7/26/10
to google-map...@googlegroups.com
setTimeOut exec the action with certain delay,
use instead Date object to set a waiting time to exec the action:


here your solution, may not work propertly but, you get the idea:
----

var onOverTime, oldOverTime = 0    // time on mouse over
var actionTime = 3                      // seconds to wait before the action is executed
var isOver                   // true if the mouse is over, false if is out

function onMouseOver(){
    isOver = true
    onOverTime = date.getTime();
    setTimeOut( 'execAction()', actionTime )
}

function onMouseOut(){
  isOver = false
}

function execAction(){
    if( !isOver )   // if mouse is not over, don't exec the function
       return;

    var date = new Date();
    onOverTime = date.getTime();
    if( oldOverTime && ( onOverTime - oldOverTime > actionTime ) ){
        // exec what you want
        oldOverTime = 0;
    }
    oldOverTime = onOverTime;
}
----

Bye
Federico
www.raintpl.com



2010/7/26 Rossko <ros...@culzean.clara.co.uk>

CSharp

unread,
Jul 27, 2010, 12:09:11 PM7/27/10
to Google Maps JavaScript API v3
This is a much shorter solution:

1) set up a global variable (within a class or prototype):

var mouseoverTimeoutId = null;

2) set up the google map's event for mouseover on a marker:

google.maps.event.addListener(marker,
'mouseover',
function()
{ ...
mouseoverTimeoutId =
setTimeout(function()

{ ...//Do your normal InfoWindow opening here
},

1000 //This is your timeout to open the infowindow
);
});

3) set up the google map's event for mouseout on a marker:

google.maps.event.addListener(marker,
'mouseout',
function()
{ ...

if(mouseoverTimeoutId)

{ clearTimeout(mouseoverTimeoutId);

mouseoverTimeoutId = null;
}
});


You need to clear the timeout because if you don't, the setTimeout
function gets called no matter what happens.
Reply all
Reply to author
Forward
0 new messages