Google Maps-Container wird nicht richtig nach Animation angepasst

Question

Ich habe einen Google Maps-Container, sagen wir 600px Höhe.

Ich habe eine Schaltfläche, Ändern der Größe (jQuery) die div Container rund um die Karte:

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

nun den Behälter und Karte ist von 300px Höhe, aber die Google Maps api denkt, dass es nach wie vor 600 Pixel ist, so dass die Das Zentrum der Karte ist immer noch auf 300 px, obwohl es 150 px (300/2) sein sollte.

http://woisteinebank.de/dev2.html# Wenn Sie in der Box nach einem Ort suchen, wird dieser zentriert. Drücken Sie "Eintragen" und suchen Sie erneut, es ist nicht richtig zentriert.

Können Sie versuchen, zu überprüfen oder sogar vorschlagen, wie Sie diesen Fehler beheben können?

Ich versuchte, die usual solution with triggering the resize event zu verwenden, aber es nicht

Answer 1

Ha ha funktioniert, weil Sie die Grßenänderungsereignis vor die Animation selbst beginnt auslösen :-) Sie warten müssen, bis sie endet. Verwenden Sie hierzu the 4th argument of .animate - der complete Rückruf, die nach der Animation endet genannt wird:

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