title: Leaflet and jQuery Mobile PhoneGap OnLoad Issue
body: <p>I am currently having an issue getting Leaflet to play nicely with jQuery Mobile / PhoneGap. I have created a map with my own custom tiles with a map on the second page in my mobile app. When I go to the page the map is sitting up in the top left of the container and if I zoom in most of the tiles are missing. If I refresh the page while testing in a browser it loads perfectly fine.</p>
  
  <p>This has lead me to believe that the script is firing too early, I tested this by putting the map page as the first div that loads in the app and everything works perfectly - however this isn't ideal for the design. I believe the problem is how I am using onLoad="init()" in the body tag.</p>
  
  <p>Here's the script for the map:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/leaflet.css" /&gt;
  &lt;script src="js/leaflet.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function init() {
      var mapMinZoom = 0;
      var mapMaxZoom = 3;
      var map = L.map('map', {
        maxZoom: mapMaxZoom,
        minZoom: mapMinZoom,
        crs: L.CRS.Simple
      }).setView([0, 0], mapMaxZoom);
  
      var mapBounds = new L.LatLngBounds(
          map.unproject([0, 1536], mapMaxZoom),
          map.unproject([1536, 0], mapMaxZoom));
  
      map.fitBounds(mapBounds);
      L.tileLayer('tiles/{z}/{x}/{y}.jpg', {
        minZoom: mapMinZoom, maxZoom: mapMaxZoom,
        bounds: mapBounds,
        attribution: 'Fraser Island',
        noWrap: true          
      }).addTo(map);
    }
  
  &lt;/script&gt;
  &lt;style&gt;
    html, body, #map { width:100%; height:480px; margin:0; padding:0; }
  &lt;/style&gt;
  </code></pre>
  
  <p>Here is the code for the body up until the map page:</p>
  
  <pre><code>&lt;body onLoad="init()"&gt;
  &lt;!--Home Page Start--&gt;
  &lt;div data-role="page" id="Home"&gt;
  &lt;div data-role="header" data-theme="b"&gt;
  &lt;a href="#Home" class="button" data-icon="home"&gt;Home&lt;/a&gt;
  &lt;h1&gt;Home Screen&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div data-role="content"&gt;
  &lt;center&gt;&lt;div class="ui-grid-a" &gt;
  &lt;div class="ui-block-a"&gt;&lt;center&gt;&lt;a href="#CustomMap"&gt;&lt;img src="img/map_button.png" width="66" height="69" alt=""/&gt;&lt;/a&gt;&lt;br&gt;Map&lt;/center&gt;          
  &lt;/div&gt;
  &lt;/div&gt;&lt;/center&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--Home Page End--&gt;
  &lt;!--Map Page Start--&gt;
  &lt;div data-role="page" id="CustomMap"&gt;
  &lt;div data-role="header"&gt;
  &lt;a href="#Home" class="button" data-icon="home"&gt;Home&lt;/a&gt;
  &lt;h1&gt;Map&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div data-role="content"&gt;
  
  &lt;div id="map" style="width: 100%; height: 480px"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--Map Page End--&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>So based on the feedback I got it working on Android devices prior to Android version 4.4.2 but it doesn't work on 4.4.2 - not sure why it won't work on 4.4.2</p>
  
  <p>The problem still exists, if I refresh the page the map works fine but it doesn't work on first load. For now I have including a small workaround by reloading the page as soon as it's loaded. I've managed to keep markers working while doing this, so everything is functioning as intended with this workaround but I would still love to get it to work on first load.</p>
  
  <p>Here's the updated script:</p>
  
  <p>Placed just before <code>&lt;/head&gt;</code>:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/leaflet.css" /&gt;
  &lt;script src="js/leaflet.js"&gt;&lt;/script&gt;
  &lt;script src="js/FunctionButton.js"&gt;&lt;/script&gt; 
  &lt;script src="js/marker.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var curMark = localStorage.getItem("mark");
  var map;
    function init() {
      var mapMinZoom = 0;
      var mapMaxZoom = 3;
      map = L.map('map', {
        maxZoom: mapMaxZoom,
        minZoom: mapMinZoom,
        crs: L.CRS.Simple
      }).setView([0, 0], mapMaxZoom);
  
      document.getElementById('map').style.display = 'block';
  
      var mapBounds = new L.LatLngBounds(
          map.unproject([0, 2048], mapMaxZoom),
          map.unproject([2048, 0], mapMaxZoom));
  
      map.fitBounds(mapBounds);
  
  
      L.tileLayer('tiles/{z}/{x}/{y}.jpg', {
        minZoom: mapMinZoom, maxZoom: mapMaxZoom,
        bounds: mapBounds,
        attribution: 'Fraser Island',
        noWrap: true   
      }).addTo(map);
  
      var btn = L.functionButtons([{ content: '&amp;circlearrowright;' }],       {position: 'topright'});
      btn.on('clicked', function(data) {
          if( data.idx == 0 ) {
              location.reload();
          };
      });
      map.addControl(btn);
  
      map.on('click', function(e) {
          &lt;!--alert("Lat, Lon : " + e.latlng.lat + ", " + e.latlng.lng)
      });
  
      var micon = L.icon({
          iconUrl: 'img/marker_hole.png',
          iconSize: [25,41],
          iconAnchor: [12,35],
          popupAnchor: [0,-35]
      });
      var mark1 = new marker(-109.875, 111.75, micon, map);
      var mark2 = new marker(-51, 126.375, micon, map);
      var mark3 = new marker(-77.625, 140.75, micon, map);
      var mark4 = new marker(-92.875, 120.875, micon, map);
      var mark5 = new marker(-107.625, 132.375, micon, map);
      var mark6 = new marker(-134.125, 121.25, micon, map);
      var mark7 = new marker(-145.875, 107.875, micon, map);
      var mark8 = new marker(-147.625, 100, micon, map);
      var mark9 = new marker(-167.5, 103.75, micon, map);
      var mark10 = new marker(-183.625, 105.375, micon, map);
      var marks = [mark1,
                   mark2,
                   mark3,
                   mark4,
                   mark5,
                   mark6,
                   mark7,
                   mark8,
                   mark9,
                   mark10
                   ];
  
      if (curMark !== null){
          var cm = curMark.split(",")
          var zoomAt = new L.LatLng(cm[0],cm[1])
          map.setView(zoomAt, 3)
          localStorage.removeItem("mark")
          for (i=0; i &lt; marks.length; i++){
              if (marks[i].getLatLng() == zoomAt.toString()){
  
              }
              else{
                  marks[i].remove();
              }
          }
      }
  
      L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
  
    }
  
   $(window).load(init);
  
  function goToMap(markId){
      localStorage.setItem("mark", markId);
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>In the Body tag:</p>
  
  <pre><code>&lt;body  onbeforeunload="return window.location.reload(true)"&gt;
  </code></pre>
  
  <p>The div for the map page:</p>
  
  <pre><code>&lt;!--Map Page Start--&gt;
  &lt;div data-role="page" id="FraserMap"&gt;
  &lt;div data-role="header"&gt;
  &lt;a href="#Home" class="button" data-icon="home"&gt;Home&lt;/a&gt;
  &lt;h1&gt;Map&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div data-role="content"&gt;
  
  &lt;div id="map"&gt;
  &lt;script&gt;
  $('#FraserMap').bind('pageshow', function(){
  
      if (!localStorage.getItem("reload")) {
          localStorage.setItem("reload", "true");
          location.reload();
      }
      else {
          localStorage.removeItem("reload");
      }
  
      if (!localStorage.getItem("mark")) {
      }
      else {
          curMark = localStorage.getItem("mark");
      }
  });
  &lt;/script&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--Map Page End--&gt;
  </code></pre>