JQuery面板按下后Google地图消失

我在jquerymobile上使用谷歌地图，当我点击菜单（面板）让它滑开时，地图会消失

这是我的JS函数：

function loadSearch(input) {
var mapOptions = {
    center: new google.maps.LatLng(1.300000,103.800000),
    zoom: 11,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    zoomControl: false,
    panControl:false
};
var map = new google.maps.Map(document.getElementById("content"),
    mapOptions);

switch(input)
{
    case 1:
        loadOptionsFooter();
        break;
    case 2:
        break;
    default:
        break; 
}
}

我试着加上

    google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});

但不知何故，它不起作用。如果有人能帮我，我将不胜感激

谢谢

编辑：

function loadOptionsFooter(){
var output = ['<div data-role="navbar"><ul>'];
output.push('<li><a href="#" data-icon="gear">Filter</a></li>');
output.push('<li><a href="#" data-icon="search">Search</a></li>');
output.push('<li><a href="#" data-icon="navigation">Locate</a></li></ul></div>');

$('[data-role="footer"]').html(output.join('')).trigger('create');
}

---

您的页面结构应该如下所示

  <div data-role="page" id="mapPage"> 
  <div id="mapHeader" data-role="header" data-theme="a">

  </div>
  <div id="mapPageContent" data-role="content">
     <div role="main" class="ui-content" id="map-canvas">
            <!-- map loads here... -->
      </div>
   </div>
   <footer data-role="footer" data-position="fixed" data-tap-toggle="false">
   </footer>
</div>

然后将映射初始化为映射画布id

var map = new google.maps.Map(document.getElementById("#map-canva"), mapOptions);

---

能否显示代码的其他部分

加载选项footer（）

，html页面构建和CSS规则如何？可能与使用class

ui panel wrapper

@Omar的div中的wrapp Map canvas重复。这解决了问题，但它导致ajax创建的侧菜单被mapsTry覆盖，而不仅仅是地图。页眉、页脚和内容分区。

function loadMenu(){
$.get('../../views/common/menu.html', function(data){
    var divData = $(data).filter('#defaultMenu')[0];
    $('#panelLeft').html(divData).trigger('create');
});
}

  <div data-role="page" id="mapPage"> 
  <div id="mapHeader" data-role="header" data-theme="a">

  </div>
  <div id="mapPageContent" data-role="content">
     <div role="main" class="ui-content" id="map-canvas">
            <!-- map loads here... -->
      </div>
   </div>
   <footer data-role="footer" data-position="fixed" data-tap-toggle="false">
   </footer>
</div>

#mapPageContent, #map-canvas { width: 100%; height: 100%; padding: 0; }

var map = new google.maps.Map(document.getElementById("#map-canva"), mapOptions);