Il contenitore di Google Maps non viene ridimensionato correttamente dopo l'animazione

Question

Ho un contenitore di google maps, diciamo 600px di altezza.

Ho un tasto, il ridimensionamento (jQuery) il contenitore div arround mappa:

  $('#add').click(function() { 
       $("#container-map").animate({ 
        height: '50%', 
        minHeight: '50%' 
       }, 1500); 
       google.maps.event.trigger(map, 'resize'); 
      }); 

Ora il contenitore e carta sono di 300px in altezza, ma l'API di Google Maps Google pensa che sia ancora 600 pixel, in modo che il il centro della mappa è ancora a 300 px anche se dovrebbe essere a 150 px (300/2).

http://woisteinebank.de/dev2.html# Quando si cerca una posizione nella casella, è centrata. Premi "Eintragen" e cerca ancora, non è centrato correttamente.

Puoi provare e verificare o addirittura suggerire come risolvere questo difetto?

ho cercato di usare il usual solution with triggering the resize event ma non funziona

Answer 1

Ah ah perché si attiva l'evento resize prima l'animazione inizia anche :-) Devi aspettare fino alla fine. Per questo, utilizzare the 4th argument of .animate - la complete callback che viene chiamato dopo l'animazione si conclude:

$('#add').click(function() { 
    $("#container-map").animate({ 
     height: '50%', 
     minHeight: '50%' 
    }, 1500, function() { 
      google.maps.event.trigger(map, 'resize'); 
    }); 
});