Google Maps znotraj jQuery accordiona

Problem: Google Maps se ne naloži pravilno znotraj jQuery accordiona.

Stric Google pravi, da je problem zaradi display: none v CSS.

Problem izgine, če je tab v accordionu, kjer se nahaja zemljevid pri nalaganju strani odprt.

Koda:

<ul id="accordion">

  <li class="acc-1">

    <div class="inner"><h3>Kje se nahajamo</h3>

    </div>

    <ul style="display: none; ">

      <li><!-- content goes here --></li>

</ul>

</li>

<li class="acc-2">

  <div class="inner"><h3>Title2</h3>

  </div>

  <ul>

    <li><!-- content goes here --></li>

</ul>

</li>

<li class="acc-3">

  <div class="inner"><h3>Title3</h3>

  </div>

  <ul>

    <li><!-- content goes here --></li>

</ul>

</li>

</ul>



<script type="text/javascript">

    $("#accordion > li > div.inner").click(function(){

        if(false == $(this).next().is(':visible')) {

            $('#accordion ul').slideUp(300);

        }

        $(this).next().slideToggle(300);

    });

    $('#accordion ul:eq(0)').show();//odpri prvi tab - v tem primeru zadeva deluje

</script>

Poskusil sem dopolniti jQuery kodo s primeri z weba (bind, resize, destroy eventi), vendar mi ne uspe.

Pomoč in nasveti dobrodošli!

Tukaj je še primer: http://jsfiddle.net/esedic/AXZuj/3/

Sam tolk, da sporočim da sem obupal in prešaltal na jQuery UI Tabs.