jQuery UI + Tabs + Google Maps

Question

So I know this is a common question, and yet I feel I have exhausted all the standard items out there.

I too have a problem with a jQuery Tab and a Google Map (2) inside a div. I have implemented the position absolute + -10000px option. I have implemented the $().bind('tabshow').... resizeMap();

I have had zero success with this issue.

I HAVE tried using the .load() with an external file that held my map, with great success, but it didn't seem like the proper solution as passing dynamic variables around didn't seem optimal.

<div id="contactTabs">
    <ul>
      <li><a href="#maps"  title="Maps">Maps</a></li>
    </ul>

    <div id="maps">
    <!-- I have placed my Javascript in here -->
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAA633BaQwEpWRjp-R1aATdPBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSkwAkIjGEiaeBEJXzobQZ3JjouCg"&gt;&lt;/script&gt;
    <script type="text/javascript" src="js/jquery.gmap-1.1.0-min.js"></script>
    <script type="text/javascript">
    $(function() {
      $("#newMap").gMap({ 
          maptype: G_NORMAL_MAP,
          address: '--centering adddy--',
          zoom: 14,
          markers: [ ]                  
      });
    });
    </script>

    <div id="newMap" style="height: 400px;"></div>
</div>

Thank you in advance for some help. I know this has been an exhausting issue with the tabs and maps. Hope there is something that someone can help me with.

Cheers,

Answer 1

after you are creating the map, try just adding:

$("#newMap").height(100);
$("#newMap").width(100);

or something similar.