GoogleマップはjQuery UIタブ内では機能しません

私はGoogle Maps用のjavascript APIを使用しています。ヘッダー内の
Googleマップは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

なぜ機能していないのか、私はあなたにその理由を伝えられませんでした。しかし、showやselectイベントのように、jQuery Tabsウィジェットのイベントの1つを使用してマップを初期化してみてください。

$('#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の-UIのサイトで文書化されている：ああ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

ので、それはです。興味深いオフ - オフのテクニック。乾杯。 –

GoogleマップはjQuery UIタブ内では機能しません

答えて

関連する問題