title: JQuery Mobile and Google Maps Not Rendering Correctly
body: <p>I am simply trying to display a google map within a jquery mobile page.  If I load the page directly it works.  However, if I navigate to the page from another page it only renders a single map tile.  At first glance it would appear that my issue was similar to <a href="https://forum.jquery.com/topic/google-maps-inside-jquery-mobile">https://forum.jquery.com/topic/google-maps-inside-jquery-mobile</a></p>
  
  <p>However, I was already performing my initialization within the 'pageinit' event and my map div has a set width and height.</p>
  
  <p>I have seen <a href="http://code.google.com/p/jquery-ui-map/">http://code.google.com/p/jquery-ui-map/</a> but I would rather not use a (another) third party plugin if at all possible.</p>
  
  <p>Here's what my page looks like:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;PhoneGap&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;script src="cordova-1.6.1.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" /&gt;
      &lt;script src="jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="global.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="mapPage" data-role="page"&gt;
          &lt;style type="text/css"&gt;
              html
              {
                  height: 100%;
              }
              body
              {
                  height: 100%;
                  margin: 0;
                  padding: 0;
              }
              #map_canvas
              {
                  height: 100%;
              }
          &lt;/style&gt;
          &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=***API_KEY_REMOVED***&amp;sensor=true"&gt;
          &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              function initialize() {
                  var height = $(window).height() - 50;
                  var width = $(window).width();
  
                  $("#map_canvas").height(height);
                  $("#map_canvas").width(width);
                  var myLatlng = new google.maps.LatLng(39.962799, -82.999802);
                  var myOptions = {
                      center: myLatlng,
                      zoom: 18,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  };
                  var map = new google.maps.Map(document.getElementById("map_canvas"),
              myOptions);
                  //alert($(map.getDiv()).width());   
                  var marker = new google.maps.Marker({
                      position: myLatlng,
                      map: map,
                      title: ""
                  });
                  google.maps.event.trigger(map, 'resize')
              }
  
              $("#mapPage").live('pageinit', function () {
  
                  initialize();
              });
  
          &lt;/script&gt;
          &lt;div data-role="header" id="menuHeader"&gt;
              &lt;a href="MenuDialog.htm" class="menuLink" data-role="none" data-rel="dialog"&gt;
                  &lt;img class="headerIcon" style="height: 40px; border-right: 1px solid #333333; padding-right: 5px;"
                      id="MenuIcon" src="images/menuIcon.png" /&gt;&lt;/a&gt;
              &lt;p&gt;
                  Loc
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div data-role="content"&gt;
              &lt;div id="map_canvas" style="margin-top: 50px;"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>Thanks in advance for you help.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>After some experimenting I added the following delay to my resize event:</p>
  
  <pre><code>setTimeout(function() {
  
              google.maps.event.trigger(map,'resize');
          }, 500);
  </code></pre>
  
  <p>This seemed to fix the issue. Hopefully this helps someone else.</p>