How do I force redraw with Google Maps API v3.0?

Question

I have a fairly sophisticated Maps application that handles multiple custom markers and such. I have a function called resizeWindow that I call in a listener to that whenever the screen is changed, the map redraws itself by calculating new bounds and forcing a resize. It looks like this:

window.onresize = function(event) { fitmap(); };

and the function to resize is:

function fitmap(id) {
    var coords = [];
    var newlatlng = new google.maps.LatLng(projlat, projlng);
    coords.push(newlatlng);

        for (var i=0; i<markers[id].length; i++) {
            newlatlng = new google.maps.LatLng(markers[id][i].latitude, markers[id][i].longitude);
            coords.push(newlatlng);
        }
    }   

    var bounds = new google.maps.LatLngBounds ();
    for (var i = 0, LtLgLen = coords.length; i < LtLgLen; i++) {
        bounds.extend (coords[i]);
    }
    map.fitBounds(bounds);

and this works great when I actually resize the window. But...

I have a menu going down the right side of the window. I use jquery.animate to move that menu off the screen. I call the fitmap function as a step process (or just once at the end) and it will not redraw the map.

$('#rightSide').animate({ right:"-240px" }, { 
    duration:1000, 
    step: function(now,fx) {
        fitmap();
    } 
});

I have read and read on this and it seems that there is an oddity of Google Maps API v3.0 that redrawing will not happen if nothing actually changes. In this case, my available window does change from screen width - menu to actual full screen. But no redraw happens.

I've tried google.maps.event.trigger(map, 'resize'); and that doesn't work either.

Is there a way to absolutely force Google Maps to redraw?

Answer 1

google.maps.event.trigger(MapInstance,'resize') is working fine for me, put it at the begin of the function fitMap .

What you are missing:

currently(not in the code posted above, in your live-code), you call resizeWindow on each step .

When you call this function on step the function will be called before the animation for the current step has finished. The result is that resizeWindow will not be called when the complete animation has been finished, there will be e.g. a margin on the right side of the map.

Solution: call resizeWindow also on the complete-callback of the animation.