CODEWITHSUNDEEP
google-mapsjquery-mobile
speedracer2003
speedracer2003

Reputation: 181

Trouble displaying Google map in jquery mobile

Hello I'm trying to make a jquery mobile page that has a map with specific coordinates and a couple of collapsible items. I got the code for the map from this site (http://jsfiddle.net/Gajotres/7kGdE/) but whenever I try it the screen just goes blank. I also DO NOT want the map to take up the entire page. I would like for it to display on the page along with the collapsible items. Any help would be greatly appreciated. Thanks

<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>

Upvotes: 1

Views: 350

Answers (1)

Omar
Omar

Reputation: 31732

The code you have provided should work with no issues, however, you have to change height of map_canvas and set a static value. The 100% won't occupy the entire height, because parent div content height is also undefined. The content div expands based on content within it.

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

Another note, you should use pagecreate instead of the deprecated event pageginit.

Demo

Upvotes: 1

Related Questions