How can I distinguish between click and drag in Google Maps JS API v3 on a mobile device?

Question

I am building an HTML5 mobile site using Bootstrap, jQuery and the Google Maps API v3.

I have calculated most of the code, I want it so that I can click, add a marker, HTTP POST, this is the place on the server (to save it).

It was initially difficult for me to get an android to see that a click should happen when touched.

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 am using http://detectmobilebrowsers.com/ jQuery code to create $.browser.mobile.

The problem is that if I click on the map, drag it and move to another place on the mobile phone, it calls placeMarker (), which is understandable if it is annoying, so the process of dragging the map creates markers (and POST to the server).

- , , , placeMarker POST?

Answer 1

, :

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

});

Answer 2

mousedown dragstart, dragend, drag. dblclick, , . , "click" "drag".