How to make overlay div in google map dragable?

Question

I need to drag the position of the div. I used below code and but is not worked. I think i done some mistake over here.also i need to rotate the div so that i can place the image at right position

var overlay;

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

function initialize() {
    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(40.743388, -74.007592)
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var swBound = new google.maps.LatLng(40.73660837340877, -74.01852328);
    var neBound = new google.maps.LatLng(40.75214181, -73.99661518216243);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);

    var srcImage = 'http://library.marist.edu/pix/LibMap3.jpg';

    overlay = new DebugOverlay(bounds, srcImage, map);

    var markerA = new google.maps.Marker({
        position: swBound,
        map: map,
        draggable: true
    });

    var markerB = new google.maps.Marker({
        position: neBound,
        map: map,
        draggable: true
    });

    google.maps.event.addListener(markerA, 'drag', function () {

        var newPointA = markerA.getPosition();
        var newPointB = markerB.getPosition();
        var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
        overlay.updateBounds(newBounds);
    });

    google.maps.event.addListener(markerB, 'drag', function () {

        var newPointA = markerA.getPosition();
        var newPointB = markerB.getPosition();
        var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
        overlay.updateBounds(newBounds);
    });

    google.maps.event.addListener(markerA, 'dragend', function () {

        var newPointA = markerA.getPosition();
        var newPointB = markerB.getPosition();
        console.log("point1" + newPointA);
        console.log("point2" + newPointB);
    });

    google.maps.event.addListener(markerB, 'dragend', function () {
        var newPointA = markerA.getPosition();
        var newPointB = markerB.getPosition();
        console.log("point1" + newPointA);
        console.log("point2" + newPointB);
    });

}

function DebugOverlay(bounds, image, map) {
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;
    this.div_ = null;
    this.setMap(map);
}

DebugOverlay.prototype.onAdd = function () {

    var div = document.createElement('div');
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';
    var img = document.createElement('img');
    img.src = this.image_;
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.opacity = '0.5';
    img.style.position = 'absolute';
    div.appendChild(img);
    this.div_ = div;
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
};

DebugOverlay.prototype.draw = function () {
    debugger;
    var overlayProjection = this.getProjection();
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';
};


DebugOverlay.prototype.updateBounds = function (bounds) {
    this.bounds_ = bounds;
    this.draw();
};

DebugOverlay.prototype.onRemove = function () {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
};


google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

(I spent too many minutes than I expect at first...)

As far as I understand your question and your code, you want to drag the floor map image directly, and the corner markers are followed with it, correct?

HTML5 supports the drag events. http://www.w3schools.com/html/html5_draganddrop.asp

However, in google maps v3, all mouse events are captured by Google Maps. Here is the trick.

---

Capture the mouse event

In order to catch the mouse events, you need to insert a div (named mouseTarget in my code) into the overlayMouseTarget pane. The overlayMouseTarget is the most top layer in Google Maps v3.

But it sets .style.display=none in normal status (not dragging). It becomes .style.display=block only if you mouse down the mouseTarget div.

However, even if in normal status, the mouseTarget div have to catch up the position with the image.

---

Dragging events

When you mousedown on the mouseTarget, you have to cancel the event at once in order to prevent dragging the map.

Then, you need to handle dragstart, drag, and dragleave events by yourself. It means you need to follow the mouse cursor position, then recalculate the image position, and marker positions.

---

Here is my answer for your first question I need to drag the position of the div.

https://jsfiddle.net/wf9a5m75/wj65aLrk/