Category: Google Maps

Step1 : Create a Route using Google Maps

Step 2 : Use GpsVisualizer to extract the Track data

• Open GpsVisualizer   [ at  http://www.gpsvisualizer.com/convert_input ]
• Select GPX as Output Format
• Copy the Goople Map Link to the URL Window and press  Convert

Step3 : Download the newly created GPX File

 

Overview

• Google Maps allows you only to display a Single Character with its Marker APi
• If you want to create a numbering scheme your are lost  – if you have more than 10 elements
• Solution : Create your own Marker by using SVG

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);

• 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

• Handling click events in Google Maps JS API v3 while ignoring double clicks
• Google Maps Event Tester