アヤックスを使用しているときにGoogleマップが完全に表示されない

Question

Googleマップについて3日ほど問題があります。 jQueryを使用してページ内のマップを動的にロードしたいここでは、コードです：左側のページで 、右のいずれかにページをロードするスクリプト：右側のページで

<script type="text/javascript"> 
    $(document).ready(
    function() { 
     $("a").each(
     function(){ 
      var ajaxOptions = {}; 
      $(this).click(function() { 
       if (this.className != "notLoad") { 
       $("#page").load(this.href, {'idtracker':getTracker()}); 
       return false; 
      } 
      }); 
     }); 
    } 
); 
    function getTracker(){ 
     return $("#idtracker option:selected")[0].value; 
    } 
</script> 

：

<?php 
$content .= '<script type="text/javascript">' . "\n"; 
$content .= "\t" . 'function initialize() {' . "\n"; 
$content .= "\t" . 'var myLatlng = new google.maps.LatLng(6.125,1.154);' . "\n"; 
$content .= "\t" . 'var myOptions = {' . "\n"; 
$content .= "\t\t" . 'zoom: 8,' . "\n"; 
$content .= "\t\t" . 'center: myLatlng,' . "\n"; 
$content .= "\t\t" . 'mapTypeId: google.maps.MapTypeId.' . $this->mapTypeId . "\n"; 
$content .= "\t" . '}' . "\n"; 
$content .= "\t" . 'map = new google.maps.Map(document.getElementById("map"), myOptions);' . "\n"; 
$content .= '}' . "\n"; 

$content .= "\t" . 'function loadMaps() {' . "\n"; 
$content .= "\t" . ' google.load("maps", "3", {"other_params":"sensor=false", "callback" : initialize});' . "\n"; 
$content .= "\t" . '}' . "\n"; 

$content .= "\t" . 'function initLoader() {' . "\n"; 
$content .= "\t" . 'var script = document . createElement("script");' . "\n"; 
$content .= "\t" . 'script.type = "text/javascript";' . "\n"; 
$content .= "\t" . 'script.src = "https://www.google.com/jsapi?async=2&callback=loadMaps";' . "\n"; 
$content .= "\t" . 'document.getElementsByTagName("head")[0].appendChild(script);' . "\n"; 
$content .= "\t" . '}' . "\n"; 
$content .= "\t" . 'window.onload=initLoader();' . "\n"; 
$content .= '</script>' . "\n"; 
print $content; 
?> 
<div id="map"></div> 

私はアヤックスのない右のページを呼び出すとき（そのURLによって）、私は完全に表示されたマップを取得しますが、ajaxを使用すると、マップが完全に表示されません。 お願いします、私はあなたの助けが必要です！

---

提供されている不完全な情報についてお詫び申し上げます。実際、マップはメインではない第2のタブに掲載されました。だから、私はjqueryがそれをした方法を理解していないが、私が地図のタブを開いたとき、カードは3分の1に表示された。 今朝、フォアグラウンド（既定で開かれている）のマップのタブを使って、マップが完全に表示されていることに気付きました。 私は今jqueryのタブのこの好奇心の問題を見つけるために頭を悩ましています！ ありがとうございました！

Answer 1

は、私はここで答えを見つけました：ポップアップを示した後、私は次のようでしたhttp://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

隠しタブでは動作しません初期化のためのいくつかの次元の計算を必要とする任意のコンポーネント、タブパネル理由display：noneによって隠されているので、内部の要素は実際の幅と高さを報告しません（ほとんどのブラウザでは0）。

簡単な回避策があります。非アクティブなタブパネルを非表示にするには、左揃えのテクニックを使用します。例えば。

：Googleはタブは次のように表示されたら、あなたはまた、マップのサイズを変更することができますマップのスタイルシートに

.ui-tabs .ui-tabs-hide { 
    position: absolute; 
    left: -10000px; 
} 

でクラスセレクタのルール「.ui-タブ.ui-タブ非表示」を置き換えます

$('#example').bind('tabsshow', function(event, ui) { 
    if (ui.panel.id == "map-tab") { 
     resizeMap(); 
    } 
}); 

resizeMap（）は、特定のマップでGoogleマップのcheckResize（）を呼び出します。 あなたの貢献に感謝します！

Answer 2

jqueryポップアップ内にマップをロードしたときも同様の問題がありました。

google.maps.event.trigger(map, "resize"); 
map.setOptions(mapOptions);