Resizing Google Maps api v3 DIV with jquery - tiles not refreshing properly

Question

I'm using the Google Maps api v3 to create a map which can be resized (the div is expanded and contracted using a jQuery toggle). Through research I found that I should call google.maps.event.trigger(map, 'resize'); when resizing the map. I have done so, but I still have problems with the tiles refreshing.

The code I am using is:

<script>
document.write('<a id="expandMap" href="#" target="_blank" title="Expand the map">+ expand map</a>');

/* Expand map_canvas DIV */

jQuery('#expandMap').toggle(function(){
jQuery('a#expandMap').text('- contract map');
jQuery('a#expandMap').attr('title', 'Contract the map');
jQuery('#map_canvas').animate({'height': '600px'}, 750, 'swing');
google.maps.event.trigger(map, 'resize');
}, function(){
jQuery('a#expandMap').text('+ expand map');
jQuery('a#expandMap').attr('title', 'Expand the map');
jQuery('#map_canvas').animate({'height': '193px'}, 750, 'swing');
google.maps.event.trigger(map, 'resize');
});

/* Expand map_canvas DIV End */
</script>

Can anyone suggest any ideas? When expanded, if you click the contract button there is a flash where all the tiles are properly visible, so it looks like the resize event is triggered when contracting. In contracted state, the map works perfectly; panning around all the tiles refresh as they should.

Really appreciate any help with this!

Cheers!

Answer 1

animate() takes some time.

You must trigger the resize-event of the map at least when the animation is complete(additionally you may trigger it on each step), not when it starts