Google Map API v3が再ロードされた場合（通常の「サイズ変更」ではない）

Question

私はすべての同様の質問を読んだが、私とは少し異なります。はじめてJQuery Mobileのダイアログが表示されると、通常のmap_canvas div内で地図が正常に読み込まれますが、ダイアログがリロードされた場合（つまり、戻るボタンをクリックしてダイアログを再び開くと）、部分的にしか表示されず、ズームアウトされますdivの左上隅を中心に3または4になります。

明示的に設定されているdivサイズに変更はなく、良好な対策としてgoogle.maps.event.trigger(map, 'resize');が呼び出されます。

の後にマップを初期化しようとしましたが、結果は同じです。

ボタンコード：

$("#dest-map-button").click(function() { 
      initializeMap(job_id,"map_canvas"); 
     } 
); 

機能：

function initializeMap(job_id, map_div){ 

    var pos = arrJobs[job_id].lat_lng.split(','); 
    var job_pos = new google.maps.LatLng(pos[0],pos[1]); 

    var driverLatLng = lat_lng.split(','); 
    var driver_pos = new google.maps.LatLng(driverLatLng[0],driverLatLng[1]); 

    var myOptions = { 
     zoom: 18, 
     center: driver_pos, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     disableDefaultUI: true 
    } 

    map = new google.maps.Map(document.getElementById(map_div), myOptions); 

    var marker = new google.maps.Marker({ 
     position: job_pos, 
     map: map, 
     title: "Job" 
    }); 

    var marker2 = new google.maps.Marker({ 
     position: driver_pos, 
     map: map, 
     title: "X", 
    }); 

    google.maps.event.trigger(map, 'resize'); 
} 

HTML：

<div data-role="page" id="dialog-destination-map" data-theme="e"> 
    <div data-role="content"> 
     <div id="map_canvas" style="height:300px; width:300px; position: relative; margin: 0px auto;"> 
     map_canvas 
     </div> 
    </div> 
    </div> 

任意のアイデア？

編集：この質問は正確に同じ問題が記述思わ：JQuery Mobile & Google Maps Glitch しかし、マップを変更する必要があるかもしれません、ここで使用することはできません提供される解決策（キャッシング）

Answer 1

他のすべてを試した後、私はついにpageshowイベントに遭遇しました。ボタンをクリックすると、すべてのページ遷移が行われなく、された後initializeMapを呼び出すと、問題を解決：

$('#dialog-destination-map').live('pageshow',function(event){ 
    initializeMap(job_id,"map_canvas"); 
    } 
); 

私はまだあなたがいない

Answer 2

var driverLatLngは「hasn lat_lng.split(',');で初期化されている

以前に宣言された

Answer 3

...それは最初のロードで働いていたどのように来るだろうあなたがページにアクセスするたびに新しい地図を作成する必要があります。事前に地図を作成します。 pageinitにあります。 pageshowに：私は@peterに同意しgoogle.maps.event.trigger(mapObj, "resize");

Answer 4

..あなたが代わりに...各pageshowのイベントにマップを作成する必要はありません、これを試してみてください。

$(document).on("pagebeforechange", function() 
{ 
    if(mapObj){ 
     center = mapObj.getCenter(); 
    } 
}); 
$("#mapPage").bind("pageshow", function() 
{ 
    google.maps.event.trigger(mapObj, "resize"); 
    if(center)mapObj.setCenter(center); 
});