Google Maps container doesn't resize properly after animation

Question

I have a google maps container, let's say 600px height.

I have a button, resizing (jQuery) the div container arround the map:

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

Now the container and map are of 300px height, but the google maps api thinks it's still 600 pixel, so the center of the map is still at 300 px although it should be at 150 px ( 300 / 2 ).

http://woisteinebank.de/dev2.html# When you search for a location in the box, it's getting centered. Hit "Eintragen" and search again, it's not properly centered.

Can you try and verify or even suggest how to fix this flaw?

I tried to use the usual solution with triggering the resize event but it doesn't work

Answer 1

Ha ha because you trigger the resize event before the animation even starts :-) You have to wait until it ends. For this, use the 4th argument of .animate - the complete callback which is called after the animation ends:

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