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