Kontener Map Google nie zmienia rozmiaru poprawnie po animacji

Question

Mam pojemnik mapy google, powiedzmy 600px wysokość.

mam przycisku, zmiana rozmiaru (jQuery) kontener div arround mapie:

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

Teraz pojemnik i mapa są 300px wysokości, ale Google Maps API uważa, że ​​to nadal 600 pikseli, a więc środek mapy nadal ma 300 pikseli, ale powinien wynosić 150 pikseli (300/2).

http://woisteinebank.de/dev2.html# Po wyszukaniu lokalizacji w polu następuje jej wyśrodkowanie. Hit "Eintragen" i wyszukaj ponownie, nie jest prawidłowo wyśrodkowany.

Czy możesz spróbować i zweryfikować, a nawet zasugerować, jak naprawić tę lukę?

Próbowałem użyć usual solution with triggering the resize event ale to nie działa

Answer 1

ha ha bo wywoła zdarzenie resize przed animacja nawet zaczyna :-) Trzeba czekać, aż to się skończy. W tym celu należy użyć the 4th argument of .animate - w complete zwrotna, która jest wywoływana po zakończeniu animacji:

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