动画后，Google地图容器无法正确调整大小

Question

我有一个谷歌地图容器，让我们说600px高度。

我有一个按钮，在地图上调整div容器的大小（jQuery）：

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

现在容器和地图的高度为300px，但谷歌地图api认为它仍然是600像素，所以地图的中心仍然是300像素，尽管它应该是150像素（300/2）。

http://woisteinebank.de/dev2.html# 当您在框中搜索某个位置时，它会居中。 点击“Eintragen”并再次搜索，它没有正确居中。

您可以尝试验证甚至建议如何修复此漏洞吗？

我尝试使用usual solution with triggering the resize event，但它不起作用

Answer 1

哈哈，因为你在动画开始之前触发调整大小事件 :-)你必须等到它结束。为此，请使用the 4th argument of .animate - 动画结束后调用的complete回调：

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