GoMap - resize after displaying hidden div

Question

    <a class="showmap" href="#">Show map</a>
<div id="map" style="height: 400px; width: 400px;"> </div>
<script type="text/javascript">
$(function() { 
 //initialise map
});

$(document).ready(function(){
    $('.showmap').click(function(){
    $("#map").slideToggle();
    google.maps.event.trigger(map, 'resize');
   });
});
</script>

As i am sure you can tell by now. I am trying to toggle on and off a google map. The problem is the map after clicking the showMap button is displayed like this on on this site:

http://forum.jquery.com/viewImage.do?fileId=14737000003424984&forumGroupId=14737000000003003

Could someone point out wwhat i am doing wrong? I want the map to display on the whole div. If you look at the bottom of that picture you will notice that the map copywrite and brand stff in in the correct place but the map isnt. It wont event move to the bottom of the div. It just jumps back up to the possition in the picture.

Answer 1

It looks as if you are calling your resize too early. try doing this instead:

$("#map").slideToggle('slow', function() {
    google.maps.event.trigger(map, 'resize');
});

This will make the resize function be called after the slide toggle has finished.

If the above doesn't work, a workaround would be to enclose the map div inside another div with overflow hidden and then slide toggle the parent div instead of the map div