[JS, HTML] Problem z JS i skryptem google maps

Witam,

Mam problem z uciekającą mapką w skrypcie google maps. Na stronie http://hestia.slupsk.pl/kontakt.aspx mam mapkę z google maps i jest ona wyświetlana OK. Ale ta strona jest trochę przeładowana, dlatego chciałem mapkę i adres ukryć i dać userowi możliwość pokazywania jej. W tym celu divovi który trzyma skrypt googl'a i adres przypisałem:

class="niewidoczny"

.niewidoczny
{
    display: none;
}

A skrypt który steruje pokazywaniem i chowaniem wygląda tak:

<asp:LinkButton Text="Pokaż adres i mapkę dojazdu" OnClientClick="javascript:return UkryjPokaz();" runat="server" />

function UkryjPokaz()
        {
            var element = document.getElementById('ImageJantar');

            if (element.getAttribute("class") == "niewidoczny" || element.getAttribute("className") == "niewidoczny")
            {
                element.setAttribute("class", "");
                element.setAttribute("className", "");
            }
            else
            {
                element.setAttribute("class", "niewidoczny");
                element.setAttribute("className", "niewidoczny");
            }

            return false; //żeby się PostBack nie zrobił
        }

Efekt można zobaczyć na stronie testowej: http://hestia.slupsk.pl/test.aspx
Jak widać mapka przesuwa się trochę na prawo i w dół. Nie wiem dlaczego i jak temu zaradzić. Jedyna różnica między stronami to wyżej wymienione elementy.

Spróbuj zamiast zmieniać wartość atrybutu class zrobić, tak, żeby po jego kliknięciu w arkuszu css na przemian zmieniać z:

.niewidoczny {
        display: none;
}

na:

.niewidoczny {
        display: block;
}

Nie wiem, czy dobrze zrozumiałem, ale w CSS dodalem druga klasę:

.widoczny
{
    display: block;
}

I w JS operowałem między tymi dwoma klasami. Niestety nie dało to efektów :/
Zmieniłem więc skrypt na taki, aby nie zmieniał klasy tylko sam element style:

function UkryjPokaz() {
            var element = document.getElementById('dol');

            if (element.getAttribute("style") == "display: none;") {
                element.setAttribute("style", "display: block;");
            }
            else {
                element.setAttribute("style", "display: none;");
            }

            return false; //żeby się PostBack nie zrobił
        }

Niestety brak zmian w zachowaniu.

PS. Otworzyłem stronę w IE i tam nie ma tego problemu. Mapka się nie przesuwa. Więc jest to wina FF...

Możesz użyć biblioteki jquery w taki sposób:
Kod HTML

<a href="javascript:void(0);" class="klik">Pokaż / Schowaj</a>
<div class="niewidoczny">Mapa</div>

Kod JavaScript:

$('.klik').toggle(
    function() {
        $('.niewidoczny').show();
    },
    function() {
        $('.niewidoczny').hide();
    }
);

function UkryjPokaz() {
var element = document.getElementById('dol');

        if (element.getAttribute("style") == "display: none;") {
            element.setAttribute("style", "display: block;");
        }
        else {
            element.setAttribute("style", "display: none;");
        }

        return false; //żeby się PostBack nie zrobił
    }

Może gdzieś w warunku jest błąd. Ja bym po prostu zrobił tak (to samo tylko prościej):

function UkryjPokaz() {
            var element = document.getElementById('dol');
            var s=element.style.display;
            if(/none/.test(s))
                element.style.display="block";
            else
                 element.style.display="none";
            return false; //żeby się PostBack nie zrobił
        }

Rozwiązałem problem. W CSS dodałem:

div#dol
{
    overflow: hidden;
}

a JS zmienia wartość height z 0px na auto i odwrotnie.

function UkryjPokaz() {
            var element = document.getElementById('dol');

            if (element.style.height == "0px") {
                element.style.height = "auto";
            }
            else {
                element.style.height = "0px";
            }

            return false; //żeby się PostBack nie zrobił
        }

Dzięki kuba_ku za udzieloną pomoc :) Pozdrawiam!

EDIT:
Deti - odpaliłem też Twój skrypcik żeby sprawdzić. Niestety w FF dalej się przesuwa. W ogóle nie mam pojęcia dlaczego, ale całe szczęście udało się to wyeliminować :)