Continuously updating rectangle bounds is very slow in Google Maps javascript API v3

I haven't found any control for selecting an area on a map that I liked, so I decided to write my own. It works fine, but in IE it's painfully slow at updating the selection box. I'm using the rectangle object in Google Maps API v3 to display the selection area on the map, redrawing it on every mousemove event.

I have found a similar implementation using v2 of the API which is working perfectly. Is there a major decrease in performance between v2 and v3, or is it just too expensive to redraw the rectangle on each mousemove event? If my control is doomed to be slow, is there a way of implementing the same functionality in another way? I have also tried using a timer to only catch some mousemove events, but with no luck.

I'm not (primarily) asking for a link to a working v3 control that doesn开发者_高级运维't lag like mine, I'm more interested in what I can do to optimize my own code (or if it's a dead end).

An example of my control can be found here: [edit: not available anymore]

Javascript code here: http://pastie.org/private/6xlg4kqh9hvqqyntbc8bfw

Thanks.

---

Very late here, but if someone else is searching, like me... IE 8 seems to be nearly uselessly slow with Google maps circles. Google's own code: http://code.google.com/apis/maps/articles/mvcfun.html runs fine on my old Pentium 4 computer in Firefox 3.6, Safari 5 and of course Chrome 10 but is silly slow in IE8. Running XP so I don't know about IE9.

---

self._rectangle.setMap(...)

calls from DrawRectangle function to improve the performance. Calling setMap every time you change the rectangle bounds is useless. Just change the bounds.

And call

self._rectangle.setMap(self.Map);

just once in the clickListener when you are setting up the startPoint of the rectangle.

Although I haven't tested it in IE, there was serious performance improvement in Chrome and Firefox.

---

You might try setting a timeout to limit mousemove responses to an interval that's short enough for your browser to handle it. For example:

interval = 100;
waiting = false;

function respond () {
    if (waiting) {
        return;
    }
    waiting = true;
    // do something useful here
    setTimeout('waiting = false;', interval);
}

document.body.onmousemove = respond;

Adjust the interval (currently 100 milliseconds, or one tenth of a second) and event target to your liking and then put your box rendering code in the callback.