title: jquery mobile + google maps / wrong height
body: <p>alas with the following code it's doesn't work - only a bit of the map is visible,
  at the header. Maybe somebody can help?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Map 2.0&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile /1.0/jquery.mobile-1.0.min.css" /&gt;
      &lt;link type="text/css" href="css/style.css" rel="stylesheet" media="all" /&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/map.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="page" id="map_page"&gt;
  
          &lt;div data-role="header"&gt;
              &lt;h1&gt;
                  Map
              &lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="content" id="map_canvas"&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$("#map_page").live("pageinit", function() {
  
      var myOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  })
  </code></pre>
  
  <p>css:</p>
  
  <pre><code> html { height: 100% }
   body { height: 100%; margin: 0px; padding: 0px }
   #map_canvas { height: 100% }
  </code></pre>
  
  <p>Greets</p>
  
  <p>@Omar: I tried to modify the code with your suggestions, but it still doesn't work. Maybe I overlooked something?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Map 2.0&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /&gt;
      &lt;link type="text/css" href="css/style.css" rel="stylesheet" media="all" /&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/map.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="page" id="map_page"&gt;
  
          &lt;div data-role="header"&gt;
              &lt;h1&gt;
                  Map
              &lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div data-role="content"&gt;
              &lt;div id="map_canvas"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$("#map_page").on("pageshow", function() {
  
      var myOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  })
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
  </code></pre>
  
  <p>Greets from Germany &amp; Morocco</p>