Question

I have a map container DIV. Lets call it #mapcontainer.

I animate its height with jQuery:

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

I know that if a map container is resized google maps needs to be triggered to be resized using:

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

Now the obvious thing is to do this in the callback of animate:

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

But this doesn’t look smooth and the map just juts to the hight after the animation has completed.

Is there anyway that the map can be resizing as the animation is running so the map transitions smoothly?

Answer 1

You trigger the event after the animation is complete and I think it’s the issue.

It’s not a good solution but maybe you can use setInterval and trig the event every 1ms when the animation is running. Maybe it it will lag, and as I said its not a best-practies solution.

var timer;

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