google-maps-api-3 - Google Maps draggable overlay on touch screen

Question

I have added a custom draggable overlay onto a google map, which works well using a mouse, but doesn't work on touch screens.

The code I am using is from this question : Can we make custom overlays draggable on google maps V3

The code is from @Dr.Molle and shown below.

Is there anything I can do to make it work on a touch screen? The marker shows, but I cannot move it.

DraggableOverlay.prototype = new google.maps.OverlayView();

DraggableOverlay.prototype.onAdd = function () {
    var container = document.createElement('div'),
            that = this;

    if (typeof this.get('content').nodeName !== 'undefined') {
        container.appendChild(this.get('content'));
    } else {
        if (typeof this.get('content') === 'string') {
            container.innerHTML = this.get('content');
        } else {
            return;
        }
    }
    container.style.position = 'absolute';
    container.draggable = true;
    google.maps.event.addDomListener(this.get('map').getDiv(),
            'mouseleave',
            function () {
                google.maps.event.trigger(container, 'mouseup');
            }
    );


    google.maps.event.addDomListener(container,
            'mousedown',
            function (e) {
                this.style.cursor = 'move';
                that.map.set('draggable', false);
                that.set('origin', e);

                that.moveHandler =
                        google.maps.event.addDomListener(that.get('map').getDiv(),
                                'mousemove',
                                function (e) {
                                    var origin = that.get('origin'),
                                            left = origin.clientX - e.clientX,
                                            top = origin.clientY - e.clientY,
                                            pos = that.getProjection()
                                            .fromLatLngToDivPixel(that.get('position')),
                                            latLng = that.getProjection()
                                            .fromDivPixelToLatLng(new google.maps.Point(pos.x - left,
                                                    pos.y - top));
                                    that.set('origin', e);
                                    that.set('position', latLng);
                                    that.draw();
                                });


            }
    );

    google.maps.event.addDomListener(container, 'mouseup', function () {
        that.map.set('draggable', true);
        this.style.cursor = 'default';
        google.maps.event.removeListener(that.moveHandler);
    });


    this.set('container', container)
    this.getPanes().floatPane.appendChild(container);
};

function DraggableOverlay(map, position, content) {
    if (typeof draw === 'function') {
        this.draw = draw;
    }
    this.setValues({
        position: position,
        container: null,
        content: content,
        map: map
    });
}



DraggableOverlay.prototype.draw = function () {
    var pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
    this.get('container').style.left = pos.x + 'px';
    this.get('container').style.top = pos.y + 'px';
};

DraggableOverlay.prototype.onRemove = function () {
    this.get('container').parentNode.removeChild(this.get('container'));
    this.set('container', null)
};


new DraggableOverlay( 
       map,//maps-instance
       latLng,//google.maps.LatLng
       'content',//HTML-String or DOMNode
       function(){}//optional, function that ovverrides the draw-method
       );

标签： google-maps-api-3custom-overlay