jquery and google maps api in Firefox

I have some divs below each other, there is a button and map holder on each div and I have this kind of code:

function mapInitialize(lat, lng, mapDiv, place) {

  //load google maps

}


$(".localize").click(function(){

            place = ...
            lat = ...
            lng = ...

            mapDiv = $(this).parent().find(".map_canvas");
            mapDiv.slideToggle(300);
            t=setTimeout("mapInitialize(lat, lng, mapDiv, place)",350);

});

i.e. when I click on a button (class "localize"), slideToggle(method) is called on map holder (mapDiv) and then, below the button, the map is loaded in it with no problem. When I click the button again, the div is closed and everything is allright.

The problem is that when I do it in Firefox (3.6, 4, 5), when I clicked the button to close the div with map, the div is closed but there is an empty space with widht and height of previously closed mapDiv below the button. It shouldnt be there, everything should return to previous state, i.e. divs should be below each other with no extra spaces 开发者_StackOverflowbetween them.

You can check what am I talking about at http://hratpoker.sk (or http://hratpoker.sk/test2.html where only the necessary code is used), when you click the magnifying glass button.

It works perfectly in Chrome, Opera, IE8, IE9, only Firefox is a problem. Do you have a suggestion why? Thanks in advance!

Try calling:

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

Once the div is hidden, to get the map to resize.

Alternatively set the CSS property "display: none;" on the map DIV to stop it being used to flow the page.