Google map problem when hide and then toggle

I have a google map in my page. I set a button with

.slideToggle()

functionality to show/hide the with the map and it do so. The problem is that I want to hide the map by default. If I use the display:none on the css, than after toggle up (sho开发者_运维百科w) the map, I don't see the markers that I put in it. Also, the map area seems much smaller than the area of its div. All of this doesn't happen if I load the page showing the map (display:block).

How can I start with hiding the map, and still be able to see it after toggle it?

For others who still have this problem on api v3 use google.maps.event.trigger(your_map_name, 'resize'); which is equivalent to checkResize() method from api v2.

Your Google maps initialization should be in a function, if it's not make sure it is. Then you can only initialize the map after you toggle it, this will also make sure it doesn't get loaded if the user doesn't wish to see it.

function init_maps(){

    // google maps api goes here

}

var init = false;

$('.show_map').click(){

    if(!init){

        init_maps();
        init = true;

    }

    $('.map').slideToggle();

}