Handling DOUBLE Click Events on Markers in Google Maps JS API v3

Requirements : Implement a SINGLE and DOUBLE click action for Google Map Markers
Current Javascript code :

google.maps.event.addListener(tMarker, "click", function (e) 
    {
        var closureTrackID = tid;
        logMessage("addListener - Single Click Pressesed");
        return false;       
    });

google.maps.event.addListener(tMarker, "dblclick", function (e) 
    {
        var closureTrackID = tid;
        logMessage("addListener - DOUBLE Click Pressesed");
        return false;       
    });    

Trace Output:    
8:19:22:201 addListener - SINGLE Click Pressesed
8:19:22:403 addListener - SINGLE Click Pressesed
8:19:22:429 addListener - DOUBLE Click Pressesed

Findings:

A single Double Click triggers 2 Single Click Actions and 1 Double Click Action
This may not what you want – very likely most of you expect that only a DOUBLE click action is triggered

Workraround: Solve this programmatically

Remove the dblclick listener
Modified Javascript code :

   google.maps.event.addListener(tMarker, "click", function (e) 
    {
        var closureTrackID = tid;
  
        handleClickONMarker(closureTrackID);
        return false;       
    });
   

function doDoubleClickProcessing(closureTrackID)
{
    logMessage("mySlider.js::doDoubleClickProcessing -:: trackID:  " + closureTrackID);
    doSingleClickProcessing(closureTrackID);    
}

var singleClickInProgess = false;
var clickTimeout = 300;
function handleClickONMarker(tid)
{
    if ( singleClickInProgess )
    {
        logStatus("slider.js::handleClickONMarker:: DOUBLE CLICK trackID: " + tid);
        singleClickInProgess = false;
        doDoubleClickProcessing(tid);
    } 
    else
    {
        singleClickInProgess = true;
        setTimeout(checkClickONMarkerStatus,300,tid);
    }       
}

function checkClickONMarkerStatus(tid)
{
    if ( singleClickInProgess  )
    {
        singleClickInProgess = false;
        logStatus("slider.js::handleClickONMarker:: SINGLE CLICK trackID: " + tid);
        doMarkerProcessing( tid)   
     }
    singleClickInProgess = false;
}

Output for a DOUBLE Click action on a Marker
8:34:09:581 STATUS: slider.js::handleClickONMarker:: DOUBLE CLICK trackID: 3

Output for a DOUBLE Single action on a Marker
8:34:13:424 STATUS: slider.js::handleClickONMarker:: SINGLE CLICK trackID: 3

Summary

Using a timer solves the problem and triggers either SINGLE or DOUBLE click events
The drawback of this approach is a short delay [300 ms] before starting processing

Reference

Leave a Reply Cancel reply