1

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

so how to make the Custom Overlays draggable ,

thanks

zjm1126
  • 34,604
  • 53
  • 121
  • 166

2 Answers2

3

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);
    };
Community
  • 1
  • 1
John
  • 1,037
  • 11
  • 19
  • but,this demo can't work good at chrome and safari ? why ? thanks – zjm1126 Sep 09 '10 at 02:58
  • mmm that is an interesting behavior I did not check - Safari and Chrome both use WebKit to render sites, so they both experience the same behavior where the drag event is captured by both the marker created and the google map element as well - I'm sure there is a way to adjust for this, but currently I do not have the time to look into it - I might try and check it out a bit more in a couple of days though – John Sep 09 '10 at 15:28
1

If you are using a custom "OverlayView" I found that adding your draggable objects the "overlayMouseTarget" pane will allow you to capture mouse events on that object and for example use jQuery UI to and apply draggable() to an object.

Gus Higuera
  • 95
  • 1
  • 9
  • The code from John is not working as of 12/5/2015. It is working by changing "overlayLayer" to "overlayMouseTarget" as the following code: 
    this.getPanes().overlayMouseTarget.appendChild(div);
     – user2618844 Dec 05 '15 at 05:32