Google Maps V3 not loading with jQuery tabs

Question

I can't get google maps running when beeing in a jQuery tab. Not sure why this is.

<script type="text/javascript">
$(document).ready(function() {
    var map = null;
    $("ul.css-tabs").tabs("div.css-panes > div");
    $("div.css-panes > div").bind('tabsshow', function(event, ui) {
        if (ui.panel.id == 'map_tab' && !map)
        {
            map = initialize();
            google.maps.event.trigger(map, 'resize');
        }
    });
});

  function initialize() {
    var latlng = new google.maps.LatLng({latitude},{longitude});

    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"{CaveTitle}"
    });

    return map;
  };

  //google.maps.event.addDomListener(window, 'load', initialize);

</script>

This is my html

<ul class="css-tabs">
    <li style="list-style-image: none;"><a href="#">Information</a></li>
    <li style="list-style-image: none;"><a href="#">Description</a></li>
    <li style="list-style-image: none;"><a href="#">Map</a></li>
    <li style="list-style-image: none;"><a href="#">Images</a></li>
</ul>
<!-- panes -->
<div class="css-panes">
    <div><p>{ImportantInfo}</p></div>
    <div><p>{description}</p></div>
    <div style="height:300px;" id="map_tab">
        <p>Longitude: {longitude}<br />
        Latitude: {latitude}<br /></p>
        <p><div id="map_canvas" style="width: 500px; height: 200px"></div></p>
    </div>
    <div><p>
    {start block images}
            <a href="images/original/{image}" class="thickbox"><img src="images/thumbnail/{image}" width="100" alt="{title}"/></a>
    {end block images}
        </p></div>
</div>

Here some CSS

/* root element for tabs  */
ul.css-tabs {  
    margin-left:10px; 
    padding:0;
    height:30px;
    width: 750px;
    border-bottom:1px solid #666;   
}

/* single tab */
ul.css-tabs li {  
    float:left;  
    padding:0; 
    list-style-type:none;   
}

/* link inside the tab. uses a background image */
ul.css-tabs a { 
    float:left;
    font-size:13px;
    display:block;
    padding:5px 30px;   
    text-decoration:none;
    border:1px solid #666;  
    border-bottom:0px;
    height:18px;
    color:#777;
    margin-right:2px;
    position:relative;
    top:1px;    
    outline:0;
    -moz-border-radius:4px 4px 0 0; 
    background: #bbbbbb url(nav.jpg) repeat-x;
    color: #FFF;
    text-align: left;
    white-space:nowrap;
}

ul.css-tabs a:hover {
    background-color:#F7F7F7;
    color:#333;
}

/* selected tab */
ul.css-tabs a.current {
    background-color:#ddd;
    border-bottom:1px solid #ddd;   
    color:#000; 
    cursor:default;
}


/* tab pane */
.css-panes div {
    display:none;
    border:1px solid #666;
    border-width:0 1px 1px 1px;
    min-height:800px;
    padding:15px 20px;
    background-color:#ddd;
    margin-left: 10px;
    width: 710px;
    position: absolute; 
    left: -1000px;  
}

This is kind of tough to stitch together in my head between jQuery, tabs, and Google Maps. Can you provide a link to a sample page that reproduces the problem? — bamnet, Jan 05 '12 at 05:30
Hi. I have quickly setup a html file. You can access it here -> http://www2.caveconditions.com/test.html — Chris, Jan 05 '12 at 15:20

score 0 · Answer 1 · answered Jan 06 '12 at 00:47

Thanks for the sample page!!! The first bug I see is in your CSS.

/* tab pane */
.css-panes div {
  display: none;
  ...
}

The snippet above is being used to hide the css pages that aren't being loaded, but it's also reaching down and hiding any div that is under an element with a class .css-panes. In this case, display: none; is getting set on the map_canvas div. This selectors other elements like the sizing and coloring info is also messing up all the divs the Google Maps API draws. You should probably do something a bit less aggressive and perhaps add a pane class to each pane div and select directly on that.

After cleaning up your stylesheet a bit I can manually load a map by running the initialize() function in a JavaScript console. It looks like your bind / event trigger code isn't firing as intended. I'd add a simple console.log("Foo"); or even an alert("Test"); in place of the initialize method call to help debug the tabshow event. (I haven't had any luck getting it to work, nor am I a jQuery tab expert)

Google Maps V3 not loading with jQuery tabs

1 Answers1

Linked