Google Maps V3 не загружается с вкладками jQuery

Question

Я не могу запустить карты Google, работая на вкладке jQuery. Не уверен, почему это так.

<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>

Это мой 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>

Здесь немного 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;  
}

Answer 1

Спасибо за образец страницы !!!Первая ошибка, которую я вижу, связана с вашим CSS.

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

Приведенный выше фрагмент кода используется для сокрытия страниц CSS, которые не загружаются, но также скрывает и скрывает любой * 1005.* div, который находится под элементом с классом .css-panes.В этом случае display: none; устанавливается в div map_canvas.Это выбирает другие элементы, такие как информация о размерах и окраске, также портит все элементы, которые рисует API Карт Google.Вам, вероятно, следует сделать что-то менее агрессивное и, возможно, добавить класс pane к каждому элементу div панели и выбрать непосредственно на нем.

После небольшой очистки таблицы стилей я могу вручную загрузить карту, запустив initialize() функция в консоли JavaScript.Похоже, ваш код триггера привязки / события не запускается так, как задумано.Я бы добавил простой console.log("Foo"); или даже alert("Test"); вместо вызова метода initialize, чтобы помочь отладить событие tabshow.(Мне не повезло заставить его работать, и я не являюсь экспертом по jQuery-вкладкам)