Google Map incorrect display when using the slideToggle function

My Google Map (V2) displays incorrectly when used in combination with JQuery (v1.4.4) using the slideToggle function to support a sliding panel (containing the map). The marker is outside the map in the top left corner and only half of th开发者_如何转开发e map is displayed. Without the panel I have no problem with the map.

Hereby an example at the following link: map example under contact details

Hereby the JQuery (v1.4.4)code

$(document).ready(function(){

        $(".btn-slide").click(function(){
                $("#panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
        });

}); 

And my CSS:

a:focus {
        outline: none;
#panel {
        height: 250px;
        width: 650px;
        display: none;
        text-align: left;
}

.btn-slide {
        background: url(images/panel/white-arrow.gif) no-repeat right -50px;
        text-align: left;
        width: 650px;
        height: 31px;
        padding: 10px 10px 0 0;
        margin: 0 auto;
        display: block;
        font: bold 120%/100% Arial, Helvetica, sans-serif;
        color: #fff;
        text-decoration: none;

} 

My CSS contains display: none; and it seems to be related to this reading other posts. However, I haven't found a workable solution yet and hopefully someone can help me out here.

Cheers! Tammo

I believe this is because the map container DOM element must have a known size during construction in order to correctly set the map size. If it's not known (because of display:none), Google maps guesses (or uses a default value) which produces the error.

If you alter the logic so the map is visible then hide the pane on document.load it might resolve the problem.

thanks, just tried that with the following code:

$(document).ready(function(){

    //Hide the panel on load
    $(".panel").hide(); 

    $(".btn-slide").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; 

    });

});

I have now hidden the panel upon load of the page and taken out the display:none value from my CSS but unfortunately no luck.

In other similar posts I came across map.checkResize(); which should be embedded with the function. It should resize the Google map but it didn't make a difference for me. Maybe I have applied it incorrectly.

Any further suggestions?

Cheers, Tammo

Had the same problem, but avoided it by using an <iframe> to show the map. The <iframe> is a separate page, and therefore handling it's own size.

so :

<div id="panel"><iframe id="idFrame" src="" margin/..../"></iframe>

$(".btn-slide").click( function() {
    $("#panel").slideToggle("slow");

    var location = "'.$url.'";
    var iframe = $(\'#idFrame\');

    $(iframe).attr(\'src\', location);
    return false;
});

works out for me