how to make a Custom Overlays draggable using google-maps v3 .

Question

the marker can drag , so the Custom Overlays can drag too ,

so how to make the Custom Overlays draggable ,

thanks

Answer 1

I recently put together a solution on a similar thread that applies greatly to this question as well:

Here is the other Stack Overflow Thread Showing how to create a custom overlay in V3 with a draggable object

Here is the working example: http://www.johnmick.net/drag-div-v3/

Here is some of the source: http://www.johnmick.net/drag-div-v3/js/main.js

To make the Custom Overlay itself draggable, using jQuery UI, you would just make the div object of the overlay draggable like:

    CustomOverlay.prototype.onAdd = function()
    {
        var div = document.createElement("DIV");
        div.style.border = "none";
        div.style.borderWidth = "0px";
        div.style.position = "absolute";
        div.style.visibility = "visible";
        jQuery(div).draggable();   //Make the overlay itself draggable
        this.div = div;
        this.addPolygon(new google.maps.LatLng(46,0));
        this.getPanes().overlayLayer.appendChild(div);
    };