title: PhoneGap + Leaflet + Jquery Mobile
body: <p>I am trying to get Leaflet maps working with a PhoneGap app and the map will not render full screen and am not sure why.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div data-role="content" id="map" style="width:100%;height:70%;position:absolute;"&gt;
    var map = new Map();
    var $map = $('#map');
    $map.height( $(window).height() - $map.offset().top );
  </code></pre>
  
  <p><strong>maps.js</strong></p>
  
  <pre><code>function Map() {
  var map = L.map('map').setView([51.505, -0.09], 13);
  
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
              }).addTo(map);
  
  L.marker([51.5, -0.09]).addTo(map)
  .bindPopup('A pretty CSS3 popup. &lt;br&gt; Easily customizable.')
  .openPopup();
  }
  </code></pre>
  
  <p>But I keep getting this where the map is off to the far right and wont load anywhere else:</p>
  
  <p><a href="http://postimage.org/image/r0e49wgt5/" rel="nofollow">http://postimage.org/image/r0e49wgt5/</a></p>
  
  <p>(Wont let me post images with reputation)</p>
  
  <p><strong>Update</strong></p>
  
  <p>The map will load if I turn the app Landscape but if I stay in portrait the map will be grey</p>