Problem with my map in my tabs

[rexmatthew]

I've been having trouble with just the map area and the calendar piece of my website. But more focused on the map piece. The map does not want to load properly or won't load at all in the second tab of my jquery tabs. I need help, I think I may be missing just a small part of the code but here's the script. Please help me...

<script>
$(function() {
$( "#tabs1, #tabs2" ).tabs(
{
    show: function(event, ui){
        // check if is "mappanel" and "map" is empty
        if (ui.panel.id == 'mappanel' && $('#map').is(':empty'))
        {
            // load map
            var myOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);      
collapsible: true       }
    }                    

});
});
</script>


<!-- ******** Tabs 1******************************************** -->
<div id="tabs1" style="width:615px" style="height:450px" style="vertical-align:top">
<ul>
<li><a href="#tabs-1">Photos</a></li>
<li><a href="#tabs-2">Location</a></li>
<li><a href="#tabs-3">Availability</a></li>
</ul>

<!-- ******** Photos ******************************************** -->
<div id="tabs-1">



</div>
<!-- ******** Photos End ******************************************** -->
<!-- ******** Location ******************************************** -->
<div id="tabs-2">

<?php 

                        if($this->gmap_OK == 1): ?>

                    <!--<div class="kr_sidecol_header" align="center">

                        <?php echo JText::_( 'COM_KOPARENT_LOCATION'); ?>

                    </div>-->

                    <div id="map">

                        <div id="map_canvas" style="height: <?php echo $this->tab_height; ?>px;"></div>

                    </div> <?php

                    endif;



                    ?>

</div>
<!-- ******** Location End ******************************************** -->
<!-- ******** Availability ******************************************** -->
<div id="tabs-3">



</div>
<!-- ******** Availability End ******************************************** -->
</div>
<!-- ******** Tabs 1 End ******************************************** -->

[LastMitch]

The map does not want to load properly or won't load at all in the second tab of my jquery tabs.

Are the map the same or different?

You can used same code for one page so I don't think I ever saw google map has different tabs.

Unless you create a function for each tab (a different google map code).

Then that will work because you have a separate code for each tabs.

I have seem 1 google map on 1 tab on 1 page but not for all tabs on the same page.

Regarding about your code.

Why do you have 2 tabs in the function here:

$("#tabs1, #tabs2").tabs(

It should be 1 for all the tabs.

$('ul.tabs li').tabs(

For example this your HTML/CSS should look like this:

<ul class="tabs">
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab2</a></li>
</ul>

<div class="container">
<div id="tab1" class="content">
<h4>Tab1</h4>
</div>
<div id="tab2" class="content">
<h4>Tab2<h4>
</div>
<div id="tab3" class="content">
<div>google Map</div>
</div>

Your jQuery should look like this:

 $('ul.tabs li').tabs({
 show: function(event, ui){
 // check if is "mappanel" and "map" is empty
 if (ui.panel.id == 'mappanel' && $('#map').is(':empty')){
 // load map
 var myOptions={
        center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     };
 var map = new google.maps.Map(document.getElementById("map"), myOptions);      
    }
}                    
});

I didn't test this code.

[rexmatthew]

Thanks. I got the map sorta working during the weekend. Just a few more bugs to fix. Thanks though.