谷歌地圖容器在動畫後無法正確調整大小

Question

我有一個谷歌地圖容器，比方說600px的高度。

我有一個按鈕，調整大小（jQuery的）的DIV容器角落找尋地圖：

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

現在的容器和地圖是300像素高，但是谷歌地圖API認爲它仍然是600像素，因此地圖中心仍然在300像素，但它應該在150像素（300/2）。

http://woisteinebank.de/dev2.html# 當您在框中搜索某個位置時，該位置已居中。 點擊「Eintragen」並重新搜索，它沒有正確居中。

你可以嘗試驗證，甚至建議如何解決這個缺陷？

我試圖用usual solution with triggering the resize event而是因爲你觸發resize事件之前的動畫甚至開始:-)你必須等待，直到它結束它不工作

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'); 
    }); 
});