Using longclick/taphold with Google Maps in jQuery Mobile?

I'm using Google Maps with jQuery Mobile.

I can bind a click event to the map easily enough, but is there a way to bind a long click? I'd like to add a marker to the map following a long click.

I can use jQuery Mobile's 'taphold', designed especially开发者_C百科 for long clicks, but that doesn't give me a way to access map properties such as the latlng of the tap:

    $('#map-canvas').bind('taphold', function(e) {
      console.log('taphold');
      e.stopImmediatePropagation();
      return false;
    } );

Conversely, I can use the Google Maps click listener, but that picks up short clicks, which makes the map fiddly to use on a mobile:

google.maps.event.addListener($('#map-canvas'), 'click', function(event){  ...

I don't see a 'longclick' event listener for Google Maps API V3: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

Any ideas?

Thanks for your help.

---

For anyone looking for a solution, I got this on the Google Maps forums, and it does the trick.

function LongClick(map, length) {
    this.length_ = length;
    var me = this;
    me.map_ = map;
    google.maps.event.addListener(map, 'mousedown', function(e) { me.onMouseDown_(e) });
    google.maps.event.addListener(map, 'mouseup', function(e) { me.onMouseUp_(e) });   
}   
LongClick.prototype.onMouseUp_ = function(e) {
    var now = +new Date;
    if (now - this.down_ > this.length_) {
        google.maps.event.trigger(this.map_, 'longpress', e);
    }   
}   
LongClick.prototype.onMouseDown_ = function() {
    this.down_ = +new Date;   
}
new LongClick(map, 300);
google.maps.event.addListener(map, 'longpress', function(event) {
    do stuff...
}

---

Using the code sample gave by Richard I made some changes to ensure that longpress events are not triggered if drag events were made during the "delay". Plus, longpress event is now triggered at the end of the delay, not when the mouseup event is triggered. Here it is :

function LongPress(map, length) {
  this.length_ = length;
  var me = this;
  me.map_ = map;
  me.timeoutId_ = null;
  google.maps.event.addListener(map, 'mousedown', function(e) {
    me.onMouseDown_(e);
  });
  google.maps.event.addListener(map, 'mouseup', function(e) {
    me.onMouseUp_(e);
  });
  google.maps.event.addListener(map, 'drag', function(e) {
    me.onMapDrag_(e);
  });
};
LongPress.prototype.onMouseUp_ = function(e) {
  clearTimeout(this.timeoutId_);
};
LongPress.prototype.onMouseDown_ = function(e) {
  clearTimeout(this.timeoutId_);
  var map = this.map_;
  var event = e;
  this.timeoutId_ = setTimeout(function() {
    google.maps.event.trigger(map, 'longpress', event);
  }, this.length_);
};
LongPress.prototype.onMapDrag_ = function(e) {
  clearTimeout(this.timeoutId_);
};

Hope it will help someone !

---

Here is the implemented answer from Leiko http://jsfiddle.net/ryanoc/BaFGw/3/code{};

---

The same code working with jquery-ui-map v.3.0-rc1 used on a marker.

var gmarker = map.gmap('addMarker', marker_opts);
new LongPress(gmarker, 500);
gmarker.addEventListener('taphold', function(e) {
    //do something
}

function LongPress(elem, length) {
  this.length_ = length;
  var me = this;
  me.elem_ = elem;
  me.timeoutId_ = null;
  elem.addEventListener('mousedown', function(e) {
    me.onMouseDown_(e);
  });
  elem.addEventListener('mouseup', function(e) {
    me.onMouseUp_(e);
  });
  elem.addEventListener('drag', function(e) {
    me.onMapDrag_(e);
  });
};

LongPress.prototype.onMouseUp_ = function(e) {
  clearTimeout(this.timeoutId_);
};

LongPress.prototype.onMouseDown_ = function(e) {
  clearTimeout(this.timeoutId_);
  var elem = this.elem_;
  var event = e;
  this.timeoutId_ = setTimeout(function() {
    elem.triggerEvent('taphold');
  }, this.length_);
};

LongPress.prototype.onMapDrag_ = function(e) {
  clearTimeout(this.timeoutId_);
};

---

The union in two codes above. This disables "HOLD" when starts dragging.

function LongClick(map, maxTime) {
    this.maxTime = maxTime;
    this.isDragging = false;
    var me = this;
    me.map = map;
    google.maps.event.addListener(map, 'mousedown', function(e) {
        me.onMouseDown_(e);
    });
    google.maps.event.addListener(map, 'mouseup', function(e) {
        me.onMouseUp_(e);
    });
    google.maps.event.addListener(map, 'drag', function(e) {
        me.onMapDrag_(e);
    });
}
LongClick.prototype.onMouseUp_ = function(e) {
    var now = +new Date;
    if (now - this.downTime > this.maxTime && this.isDragging === false) {
        google.maps.event.trigger(this.map, 'longpress', e);
    }
}
LongClick.prototype.onMouseDown_ = function() {
    this.downTime = +new Date;
    this.isDragging = false;
}
LongClick.prototype.onMapDrag_ = function(e) {
    this.isDragging = true;
};