Drag (move) a polygon using Google Maps v3

Question

The Google Maps API for a Polygon does not offer a drag method.

What would be an efficient way of implementing such a feature (i.e., sufficiently optimised so that i

Answer 1

Okay - so after seeing the website you are trying to implement I started to feel like Raphael may not be necessary because it is a pretty heavy JS Library - and if you are only trying to draw a rectangle polygon I thought, why not just do it with a single lightweight DIV instead?

However I think the Raphael solution would still hold water for many other cases - so I think I'll just post another possible answer.

Here is a working example I threw together:

http://www.johnmick.net/drag-div-v3/

Feel free to take a look at the source:

http://www.johnmick.net/drag-div-v3/js/main.js

Essentially we do the following

1. Create the Custom Overlay
2. Create the draggable div polygon and, using jQuery UI, make it draggable
3. Tie an event that listens to when the dragging has stopped that updates the LatLng position of the rectangle
4. Add the object to the Custom Overlay
5. Implement the draw function to redraw the rectangle during zooms and pans

Currently I am only storing one LatLng value for the Rectangle (being the top left corner) - you could easily extend this example to store all 4 points of the rectangle and have the shape dynamically resize itself on zooms. You may want to do that, otherwise as users zoom out they will get a climate report for a larger and larger area.