jQuery Mobile 載入google map顯示不完全的問題

Jquery Mobile的頁面載入google map會有一個bug(如第一個Go map button)，這一個bug會造成map只有顯示一小塊(如果螢幕大一點的裝置，就真的是很小一塊了)。

問題

會這樣的原因是jquery mobile在未載入的頁面會是display: none，所以在載入google map時就會有空間不夠大的問題，這邊有兩種解決方式提供給大家參考。

initialize()
//這是載入地圖的function

關閉轉場動畫

效果參考Go Map2 (no transition)的按鈕。

$('#Map2').on('click',function(){    
  $.mobile.changePage( "#map", { transition: "none", changeHash: true });
  //把換頁的動畫設成none
  initialize();
});

延遲執行

效果參考Go Map3 (time out function)的按鈕。

var mytimeout;

$('#delayMap').on('click',function(){    
  mytimeout = window.setTimeout(initialize, 500);
  //延遲載入地圖的時間
});