Google Maps Markers disappear after multiple fitBounds() calls

Problem Description

  • You have mulitple fitBounds() calls to display your Google Map
  • After some calls  your draggable Markers disappear from your Map
  • If you slightly move the Map the Markers get displayed again
  • Very likely you hit Googe Maps Bug 5176

Workaround 1

  • Create your Maps Marker with draggable set to false
var tMarker = new google.maps.Marker({
    position: markerPos,
    draggable: false, 

Workaround 2

  • In case your need a draggable marker call map.panBy(0,0) to fix the problem
  • Flow
    • fitBounds() triggers the center_changed event
    • Within this event call panBy() without moving the map at all
google.maps.event.addListenerOnce(gMap, 'center_changed', function() {
    var gMap = myControlPanel.getMap();  // Die and give up if gMap is null
    gMap.panBy(0,0);
});

gMap.fitBounds(bounds);

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