谷歌地圖裏面的jquery選項卡問題

我試圖在jQuery選項卡中顯示谷歌地圖。我的代碼正在工作，但沒有渲染地圖內的標籤，我已經應用了所有發佈在stackoverflow上的各種問題給出的技術，但他們都沒有工作。下面是我的代碼谷歌地圖裏面的jquery選項卡問題

CSS

.tab_container { } 
ul.tabs { 
    margin: 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    height: 32px; 
    border-bottom: 1px solid #CCC; 
    border-left: 1px solid #CCC; 
    width: 100%;} 

    ul.tabs li { 
     float: left; 
     margin: 0; 
     padding: 0; 
     height: 31px; 
     line-height: 31px; 
     border: 1px solid #CCC; 
     border-left: none; 
     margin-bottom: -1px; 
     background: #e0e0e0 url(images/accordion_header.png) repeat-x top right; 
     overflow: hidden; 
     position: relative; } 
     ul.tabs li a  { 
      text-decoration: none; 
      color: #222; 
      display: block; 
      font-size: 1.2em; 
      padding: 0 20px; 
      border: 1px solid #fff; 
      outline: none; } 
    ul.tabs li a:hover { background: #ccc; }  
      ul.tabs li.active, ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } 

.tab_content_container { 
    border: 1px solid #CCC; 
    border-top: none; 
    clear: both; 
    float: left; 
    width: 100%; 
    background: #fff;} 
    .tab_content { font-size: 1.2em; padding: 20px 20px 10px; display: none; } 
    .tab_content:first-child { display: block; }

jQuery函數

(function($){ 
    $.fn.tabs = function(options) { 
     var defaults = {}; 
     var options = $.extend(defaults, options); 
     return this.each(function() {   
      var $tabContainer = $(this); 
      var $tabLi = $tabContainer.find ('.tabs li'); 
      var $tabContent = $tabContainer.find ('.tab_content');   
      $tabContent.hide(); 
      $tabLi.eq (0).addClass ('active').show(); 
      $tabContent.eq (0).show(); 

      $tabLi.live ('click' , function() 
      { 
       var activeTab = $(this).find ('a').attr ('href'); 

       $tabLi.removeClass("active"); 
       $(this).addClass("active"); 
       $tabContent.hide(); 
       $(activeTab).css({'visibility':'visible'});     
       $tabContainer.find (activeTab).fadeIn ('slow'); 
       if(activeTab == '#about') { 
         initialize();//google map 
         } 
       return false; 
      });   });   }; 

})(jQuery); 
function initialize() { 
     var myLatlng = new google.maps.LatLng(28.46583740, 77.03269809999999); 
     var mapOptions = { 
     center: myLatlng, 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     var marker = new google.maps.Marker({ 
     position: myLatlng, 
     });  
     google.maps.event.addListener(map, "idle", function(){ 
      marker.setMap(map); 
     }); 
    }

這裏是HTML的div

<div id="about" class="tab_content" style="display: none; "> 
             <div id="map_canvas" style="width:100%; height:100%"></div> 
            </div>

來源

2012-11-16 Sachin

是tab中的map_canvas元素嗎？ – Gareth

設置了jsfiddle或jsbin，以便我們可以看到您的嘗試並編輯您的代碼。 – RASG

裏面的標籤確保在初始化一個地圖之前div是可見的 – Kotzilla

我覺得問題就在這裏：

var marker = new google.maps.Marker({ 
    position: myLatlng //<----- remove the ' , ' 
});

看看是否有效。

來源

2012-11-16 11:57:17 Jai

谷歌地圖裏面的jquery選項卡問題

回答

相關問題