Resizing Google Maps api v3 DIV using jquery - tiles do not update properly

Question

I use Google Maps api v3 to create a map that can be resized (the div is expanded and compressed by switching jQuery). Through research, I discovered that I should call google.maps.event.trigger (map, 'resize'); when resizing a card. I did this, but I still have problems updating the tiles.

The code I use 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 expanding, if you click the "Contract" button, a flash will appear where all the tiles will be correctly visible, so it seems that during compression, a resize event occurs. In a compressed state, the card works fine; panning around all fragments is updated, as it should be.

Really appreciate any help with this!

Hurrah!

Answer 1

animate() takes some time.

You should trigger a map resize event, at least when the animation is complete (you can optionally run it at every step), and not when it starts