无法在jquery mobile中显示Google地图

Question

您好，我正在尝试制作一个jQuery移动页面，该页面具有一个带有特定坐标的地图和几个可折叠项。 我从该站点（ http://jsfiddle.net/Gajotres/7kGdE/ ）获得了地图的代码，但是每当尝试尝试时，屏幕都会变成空白。 我也不想地图占据整个页面。 我希望它与可折叠项一起显示在页面上。 任何帮助将不胜感激。 谢谢

<html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
  </head>

  <style>
    #content {
       padding: 0;
       position : absolute !important; 
       top : 40px !important;  
       right : 0; 
       bottom : 40px !important;  
       left : 0 !important;     
    }
  </style>

  <body>
     <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
           <h3>First Page</h3>
        </div>

        <div data-role="content" id="content">

        <div id="map_canvas" style="height:100%"></div>
           <div data-role="collapsibleset">
              <div data-role="collapsible">
                  <h3>Click me - I'm collapsible!</h3>
                  <p>I'm the expanded content.</p>
              </div>

              <div data-role="collapsible">
                 <h3>Click me - I'm collapsible!</h3>
                 <p>I'm the expanded content.</p>
              </div>

              <div data-role="collapsible">
                 <h3>Click me - I'm collapsible!</h3>
                 <p>I'm the expanded content.</p>
              </div>

              <div data-role="collapsible">
                <h3>Click me - I'm collapsible!</h3>
                <p>I'm the expanded content.</p>
              </div>
          </div>
     </div>

     <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>First Page</h3>
    </div>
   </div>
</body>
<script>
    $(document).on('pageinit', '#index',function(e,data){    
      var minZoomLevel = 10;
      var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });
   });
 </script>
 </html>  

Answer 1

您提供的代码应该没有问题，但是，您必须更改map_canvas height并设置一个静态值。 100%不会占据整个高度，因为父div content高度也未定义。 内容div根据其中的内容进行扩展。

#map_canvas {
  height: 200px;
  width: 100%;
}

另外请注意，您应该使用pagecreate而不是已弃用的事件pageginit 。

演示