How can I differentiate between a click and a drag in Google Maps JS API v3 on Mobile?

google-maps-api-3, javascript, jquery

Solution

See if code like this will work for you:

google.maps.event.addListener(map, 'mousedown', function(event) {

  var initPoint = {x: event.pageX, y: event.pageY}, 
      toBeCanceled = false, 
      latLong = event.latLong;

    google.maps.event.addListener(map, 'mousemove', function(event) {
       var newPoint = {x: event.pageX, y: event.pageY};

       // if newPoint has moved beyond expected limits
       toBeCanceled = true
    });  

    google.maps.event.addListener(map, 'mouseup', function(event) {

      if (toBeCanceled) {
        event.preventDefault() // event.stop() seems to work as commented by OP
      } else {
        placeMarker(event.latLng);
      }

      // Unregister mousemove and mouseup
    });

});

Problem

I'm building a mobile-capable HTML5 site with Bootstrap, jQuery and the Google Maps v3 API. I've figured out most of the code, I want to be able to click, add a marker, HTTP POST that location to the server (for storing it). I initially had trouble getting android to see that a click should happen on touch. ``` if ($.browser.mobile) { google.maps.event.addListener(map, 'mousedown', function(event) { placeMarker(event.latLng); }); } else { google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); }); } } ``` I'm using http://detectmobilebrowsers.com/ jQuery code to do the `$.browser.mobile` thing. The problem I'm having is that if I click the map, to drag it, and move to a different location on mobile, it calls placeMarker(), which is understandable, if irritating, so the process of dragging the map creates markers (and POSTs to the server). Is there any way I can detect, if a drag has taken place, so I can tell it to not bother doing placeMarker and POST?

Original source