How can I make my google map load within a jquery tab?

Question

My google maps will not load within the first tab (active tab) of my dcodes tabs jquery script. I believe the map is being initialized before the active tab div is visible. Some guys, as a work around, initialized() later on in the script or when the tab is actually clicked and opened. This will not work for me as I have multiple maps being loaded on the same page and a php loop is passing variables to javascript as each function is called.

If I have to do without the tabs, I will. But, it will make my page look a lot cleaner if I could put my maps into a tab.

When I comment out the lines that have hide(), the maps do appear within the tab.

I am using Google Maps API v3

Opera Tabs (Style 4) http://www.dcodes.net/2/docs/tabs.html

Here is the link to the js fiddle code which I pulled out of view page source.

I did try storing the display_kmlmap() function into a php variable and then printing it after the javascript for the tabs to see if that made a difference and it didn't.

Here is my code:

   <script type="text/javascript"> 
function display_kmlmap(kmlmapid, kmlurllink)
{
    var kmlmap = kmlmapid;
    var kmlUrl = 'http://www.example.com/test/'+ kmlurllink;
    //document.write(kmlmap);
    //document.write(kmlUrl);
    var map_options = { };  
    var map = new google.maps.Map(document.getElementById(kmlmap),map_options);

   // var kmlUrl = 'http://www.example.com/test/PW-Files/19/kml/161091.kml';
   var kmlOptions = { mapTypeId: google.maps.MapTypeId.SATELLITE,map: map
    };

    var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
}
</script>

 <!-- Note:  I have these files on my local drive, but have listed the hosted files on here so you can access them. -->
    <!-- DC Tabs CSS -->
<link type="text/css" rel="stylesheet" href="http://cdn.dcodes.net/2/tabs/css/dc_tabs.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Tabs JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/tabs/js/dc_tabs.js"></script>

    <!-- DC Opera Tabs Start -->
<div class="dc_tabs_type_4_container" style="width:90%; height:auto;">
  <ul id="dc_tabs_type_4">
    <!-- Tab Captions -->
    <li><a href="#" title="red-tab1">Aerial View</a></li>
    <li><a href="#" title="red-tab2">Listing Details</a></li>
    <li><a href="#" title="red-tab3">Videos</a></li>
    <li><a href="#" title="red-tab4">Printable Docs</a></li>
  </ul>
  <div id="dc_tabs_type_4_content" style="height:auto;"> <!-- Tab Content Container -->

    <!-- Tab 1 Start -->
    <div id="red-tab1">

    <?php
$dirname = "PW-Files/$listingid/kml/";
$kmls = glob($dirname."*");
 $html = "";
//Display kmls using foreach loop
foreach($kmls as $kml){

 // display_kmlmap()
 $info = pathinfo($kml);
$file_name =  basename($kml,'.'.$info['extension']);
//print $kml;
$html .= "<div id=\"$file_name\" style=\"width:500px; height:300px; float:left\"></div>";
?>
<script type="text/javascript">
 $(document).ready(function() {
            if ($('#<?php echo"$file_name";?>').length != 0) {

display_kmlmap(<?php echo json_encode($file_name);?>, <?php echo json_encode($kml);?>);

 }
      });

</script>
<?php
}
    echo "$html";

?>

   <p>Where is the map?</p>

    </div>
    <!-- Tab 1 End -->

    <!-- Tab 2 Start -->
    <div id="red-tab2">
      <h2>Tab Two</h2>
      <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
      <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>
      <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>
    </div>
    <!-- Tab 2 End -->

    <!-- Tab 3 Start -->
    <div id="red-tab3">
      <h2>Tab Three</h2>
      <p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.</p>
      <h3>Duis pulvinar nibh vel urna</h3>
      <p>Donec purus leo, porttitor eu molestie quis, porttitor sit amet ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan ornare elit id imperdiet. </p>
      <p>Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. </p>
    </div>
    <!-- Tab 3 End -->

    <!-- Tab 4 Start -->
    <div id="red-tab4">
      <h2>Tab Four</h2>
      <p>Magnis dis parturient montes, nascetur ridiculus mus. Nullam ac massa quis nisi porta mollis venenatis sit amet urna. Ut in mauris velit, sed bibendum turpis.</p>
      <p>Nam ornare vulputate risus, id volutpat elit porttitor non. In consequat nisi vel lectus dapibus sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum sagittis libero.</p>
    </div>
    <!-- Tab 4 End -->

  </div> <!-- /dc_tabs_type_4_content -->
<!-- DC Opera Tabs End -->
<div class="dc_clear"></div> <!-- line break/clear line -->
<!-- DC Opera Tabs Settings -->
</div>

<script type="text/javascript">
/* Tabs 4 */

$(document).ready(function() {
    $("#dc_tabs_type_4_content div").hide(); // Initially hide all dc_tabs_type_4_content 
    $("#dc_tabs_type_4 li:first").attr("id","current"); // Activate first tab
    $("#dc_tabs_type_4_content div:first").fadeIn(); // Show first tab dc_tabs_type_4_content

    $('#dc_tabs_type_4 a').click(function(e) {
        e.preventDefault();        
      $("#dc_tabs_type_4_content div").hide(); //Hide all dc_tabs_type_4_content 
        $("#dc_tabs_type_4 li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show dc_tabs_type_4_content for current tab
    });
})();

</script>

This is the closest thing i've found on the web: Google Maps and jQuery Tabs by Dom. He changed hide() to css.visibility. However, his code is a little different from mine so i'm not sure what I should do to mine since I am not advanced enough with javascript and css, but I would like to learn.

Here is Dom's code which he claimed worked for him:

 $(document).ready(function() {

        //Default Action
        $(".tab_content").css({'visibility':'hidden'  , 'position':'absolute'});
        $("ul.tabs li:first").addClass("active").show(); 
        $(".tab_content:first").css({'visibility':'visible' , 'position':'static'}); 

        //On Click Event
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active");
            $(this).addClass("active"); 
            $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); 
            var activeTab = $(this).find("a").attr("href"); 
            $(activeTab).css({'visibility':'visible'  , 'position':'static'});
            return false;
        });

    });

Answer 1

There were a few issues I found in your code:

• Missing </div> end tags resulted in tab 1 being the parent of tabs 2-4
  • Fix: add 2 end tags to terminate tab 1 and #dc_tabs_type_4_container
• Broad jQuery selectors like #dc_tabs_type_4_content div were hiding all <div>s which were in #dc_tabs_type_4_content. These hidden <div>s were not being unhidden in any other part of the codebase
  • Fix: use #dc_tabs_type_4_content > div, which only selects tabs and excludes <div>s within tabs
• Missing position: absolute in style attribute of #dc_tabs_4_content. This allows the parent to completely contain the map (or text) inside
  • Fix: remove height: auto and insert position: absolute

Updated JSFiddle

Answer 2

<script>
 jQuery("#home").click(function () {
 jQuery(".test").addClass("highlight");
 jQuery(".test1").removeClass("highlight");
 jQuery(".test2").removeClass("highlight");
 jQuery('#submit').removeAttr('disabled');;
 });
 jQuery("#moving").click(function () {
 jQuery(".test2").addClass("highlight");
 jQuery(".test").removeClass("highlight");
 jQuery(".test1").removeClass("highlight");
 jQuery('#submit').removeAttr('disabled');;
 });
 jQuery("#carpet").click(function () {
 jQuery(".test1").addClass("highlight");
 jQuery(".test").removeClass("highlight");
 jQuery(".test2").removeClass("highlight");
 jQuery('#submit').removeAttr('disabled');;
 });
 </script>