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

Question

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.

Your example works just fine for me - I'm running IE9 beta, BTW. — belugabob, Mar 07 '11 at 15:14
I have tested with IE8 and Chrome 9, both on powerful machines. The rectangle renders much smoother in Chrome, but there is still noticeable flicker when selecting larger areas on the screen. — aspartame, Mar 07 '11 at 21:47
I'm running into the same issue. The map points and map drag are painfully slow in ie8, but work fine in ie9, chrome, and firefox. — Mike Purcell, Dec 12 '11 at 18:28

score 2 · Answer 1 · answered Jun 10 '11 at 16:38

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.

score 1 · Answer 2 · answered Mar 10 '11 at 15:28

1

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.

answered Mar 10 '11 at 15:28

Tomik

23,857
8
121
100

Yeah, I noticed that the call to setMap() was unnecessary and removed it. I saw some improvement, but I actually think IE is a lost case no matter how much I optimize :) Thanks for pointing it out though! – aspartame Mar 10 '11 at 15:42

score 0 · Answer 3 · answered Mar 08 '11 at 01:17

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.

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

3 Answers3