Cambiar el tamaño de Google Maps api v3 DIV con jquery - las teselas no se actualizan correctamente

Question

Estoy usando Google Maps api v3 para crear un mapa que puede cambiar de tamaño (el div se expande y contrae usando un jQuery). A través de la investigación, descubrí que debería llamar a google.maps.event.trigger (map, 'resize'); al cambiar el tamaño del mapa. Lo he hecho, pero todavía tengo problemas con las baldosas refrescantes.

El código que estoy utilizando es:

<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> 

¿Puede alguien sugerir alguna idea? Cuando se expande, si hace clic en el botón de contrato, hay un flash donde todos los mosaicos están bien visibles, por lo que parece que el evento de cambio de tamaño se activa al contraerse. En estado contraído, el mapa funciona perfectamente; haciendo un barrido alrededor de todas las baldosas, actualízalas como deberían.

apreciar realmente cualquier ayuda con esto!

¡Salud!

Answer 1

animate() lleva algún tiempo.

Usted debe disparar el cambio de tamaño del evento del mapa, al menos cuando la animación se ha completado (que, además, puede desencadenar en cada paso), no cuando se inicia