Vùng chứa Google Maps không thay đổi kích thước chính xác sau khi hoạt ảnh

Question

Tôi có vùng chứa bản đồ google, giả sử chiều cao 600px.

Tôi có một nút, thay đổi kích thước (jQuery) container div arround bản đồ:

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

Bây giờ container và bản đồ là của 300px chiều cao, nhưng các bản đồ google api nghĩ nó vẫn còn 600 điểm ảnh, do đó trung tâm của bản đồ vẫn ở mức 300 px mặc dù nó phải ở mức 150 px (300/2).

http://woisteinebank.de/dev2.html# Khi bạn tìm kiếm vị trí trong hộp, vị trí sẽ được căn giữa. Nhấn "Eintragen" và tìm kiếm lại, nó không được căn giữa.

Bạn có thể thử và xác minh hoặc thậm chí đề xuất cách khắc phục lỗ hổng này không?

tôi cố gắng sử dụng usual solution with triggering the resize event nhưng nó không hoạt động

Answer 1

Ha ha bởi vì bạn kích hoạt các sự kiện thay đổi kích thước trước các hình ảnh động thậm chí bắt đầu :-) Bạn phải đợi cho đến khi nó kết thúc. Đối với điều này, sử dụng the 4th argument of .animate - các complete callback được gọi là sau khi kết thúc hoạt hình:

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