Google Map некорректно отображается при использовании функции slideToggle

Question

Моя карта Google (V2) отображается неправильно при использовании в сочетании с JQuery (v1.4.4) с использованием функции slideToggle для поддержки скользящей панели (содержащей карту).Маркер находится за пределами карты в верхнем левом углу, и отображается только половина карты.Без панели у меня нет проблем с картой.

Приведем пример по следующей ссылке: Пример карты под контактными данными

При этом JQuery (v1.4.4)код

$(document).ready(function(){

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

}); 

И мой 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;

} 

Мой CSS содержит display: none;и похоже это связано с чтением других постов.Тем не менее, я еще не нашел подходящее решение, и, надеюсь, кто-то может помочь мне здесь.

Ура!Tammo

Answer 1

спасибо, только что попробовал это со следующим кодом:

$(document).ready(function(){

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

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

    });

});

Теперь я скрыл панель при загрузке страницы и вытащил отображение: ни одно значение из моего CSS, но, к сожалению, не удача.

В других подобных постах я наткнулся на map.checkResize (); который должен быть встроен в функцию. Он должен изменить размер карты Google, но для меня это не имеет значения. Возможно я применил это неправильно.

Есть еще какие-нибудь предложения?

Ура, Tammo

Answer 2

Была такая же проблема, но ее удалось избежать, используя <iframe>, чтобы показать карту.<iframe> - это отдельная страница, поэтому она обрабатывает свой собственный размер.

, поэтому:

<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;
});

мне подходит

Answer 3

Я полагаю, это потому, что DOM-элемент контейнера карты должен иметь известный размер во время построения, чтобы правильно установить размер карты.Если он неизвестен (из-за display:none), Google карты угадывает (или использует значение по умолчанию), которое выдает ошибку.

Если вы изменили логику, чтобы карта была видимой, скрыть панель в документе.загрузить это может решить проблему.