javascript - Handle when drawing of polygons is complete in google maps api v3

Question

It seems that drawing of polygons is asynchronous in google maps api v3. Try to click the "Load" button in this example:

http://jsfiddle.net/rmXXF/

the text "DONE" is written much sooner than the grid is drawn! It seems that drawing of rectangle grid is asynchronous. I want the text DONE displayed AFTER the grid is drawn! Is there some event handler for this?

The important part of code is in function action():

polygons = draw_all_squares(map); // draw grid here
document.getElementById('status').innerHTML = 'DONE'; // displayed 2 seconds
                                                      // before the grid! 

Note that map 'idle' event doesn't work for this, because the map is not moving/zooming. You can try here: http://jsfiddle.net/92Hxj/

Maybe it has something to do not with google maps but with browser rendering? In any case, some event handler for this should be present.

Answer 1

By triggering a small recentering of the map after drawing all the polygons this is added to the same internal google maps event queue as can be seen in this example: http://jsfiddle.net/rmXXF/40/

google.maps.event.addListener(map, 'idle', function() {
 document.getElementById('status').innerHTML = 'DONE';
});

and

my_map.setCenter(new google.maps.LatLng(my_map.getCenter().lat(), my_map.getCenter().lng() + .000000001));