谷歌地圖將無法在jQuery UI標籤內工作

我正在使用JavaScript API的谷歌地圖。這很簡單，我只是有：
谷歌地圖將無法在jQuery UI標籤內工作

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
      function initialize() { 
      var myLatlng = new google.maps.LatLng(<?php echo $get_music_spot['music_spot_lat'].', '.$get_music_spot['music_spot_lng']; ?>); 
      var myOptions = { 
       zoom: 14, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title:"<?php echo $get_music_spot['music_spot_title']; ?>" 
      }); 
      } 
</script>

在頭

，然後我在身體<div style="width:600px; height:500px; float:left;" id="map_canvas"></div> 實際調用地圖。那麼我當然有<body onLoad="initialize()"> 這基本上是你所需要的一個基本地圖。但是，因爲它在jQuery中，例如jQuery UI選項卡變得不合時宜。下面是截圖：

enter image description here

你可以看到，只有在地圖的一個片段在左上角顯示。爲什麼會發生這種情況，我該如何解決這個問題？我將iFrame作爲基本嵌入來實現，但在IE中不起作用。

來源

2012-03-18 Graham

至於爲什麼它不工作，我不能告訴你爲什麼。但嘗試使用jQuery Tabs小部件中的一個事件來初始化地圖，例如show或select事件。

$('#myTabs').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);  
     } 
    }      
});

，包括在那裏檢查，使得地圖每地圖選項卡（或任何其他選項卡）被選中時不會被重新裝入這一點很重要。

看到它在這工作jsFiddle。

來源

2012-03-18 06:06:38

這是即使在記錄jQuery的用戶界面的網站：http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F – DCoder 2012-03-18 06:16:28

啊，原來是這樣。有趣的左外技術。乾杯。 – 2012-03-18 06:20:47

谷歌地圖將無法在jQuery UI標籤內工作

回答

相關問題