Google지도 컨테이너의 jQuery 애니메이션 높이

Question

지도 컨테이너 DIV가 있습니다. #mapcontainer라고 부릅니다.

내가 jQuery를 함께 높이 애니메이션 :

는

google.maps.event.trigger(map, 'resize'); 

이제 분명한 것입니다

$("#mapcontainer").animate({height: +=200px}, 500); 

내가지도 컨테이너의 크기가 변경되는 경우 구글 맵을 사용하여 크기를 조정할 수 트리거 될 필요가 있음을 알고 애니메이션의 콜백에서 이것을 수행하려면 :

$("#mapcontainer").animate({height: +=200px}, 500, "linear", function(){ 
    google.maps.event.trigger(map, 'resize'); 
}); 

그러나 이것은 부드럽지 않고지도 만 애니메이션이 끝난 후 고함을 뚫는다.

어쨌든 맵이 애니메이션이 실행 중일 때 크기가 조정되어 맵이 부드럽게 전환됩니다.

Answer 1

애니메이션이 완료된 후에 이벤트가 발생하고 이것이 문제라고 생각합니다.

좋은 해결책은 아니지만 애니메이션이 실행 중일 때마다 1 분마다 setInterval 및 trig 이벤트를 사용할 수 있습니다. 어쩌면 그것은 지연 될 것이며, 내가 말했듯이 그 최고의 실천 솔루션이 아닙니다.

var timer; 

timer = setInterval(function(){ google.maps.event.trigger(map, 'resize')}, 100); 
$("#mapcontainer").animate({height: +=200px}, 500, "linear", function(){ 
    timerMap = clearInterval(timer); 
});