title: jQuery Mobile and Google map not visible
body: <p>Alright, so I'm a noobie when it comes to jQuery mobile, but I'm getting my feet wet.</p>
  
  <p>The gist is a two page mobile site. Page one is a simple form where users select a couple of options. When the form is submitted, they get redirected to page two, which contains the "map canvas". But for some reason, the next page is just blank. Sometimes when I hit the back button I can see the map but briefly. I'm stumped!</p>
  
  <p>I'm using jQuery 1.6.4 and jQuery Mobile 1.0rc1.</p>
  
  <p>Here is some of my code:</p>
  
  <p><strong>Page One HTML:</strong></p>
  
  <pre><code>&lt;div data-role="page" id="one"&gt;
      &lt;div data-role="content"&gt;
          &lt;div data-role="fieldcontain"&gt;
              &lt;form action="" id="mobile-findpath" method="post"&gt;
                  &lt;label for="mobile-start" class="select"&gt;Start:&lt;/label&gt;
                  &lt;select name="start" id="mobile-start"&gt;
                      &lt;option data-placeholder="true" value=""&gt;Current Position&lt;/option&gt;
                      {% for node in nodes %}
                      &lt;option value="{{ node.lat }},{{ node.lng }}"&gt;{{ node.label }}&lt;/option&gt;
                      {% endfor %}
                  &lt;/select&gt;
                  &lt;label for="mobile-end" class="select"&gt;Dest:&lt;/label&gt;
                  &lt;select name="end" id="mobile-end"&gt;
                      {% for node in nodes %}
                      &lt;option value="{{ node.label }}"&gt;{{ node.label }}&lt;/option&gt;
                      {% endfor %}
                  &lt;/select&gt;
                  &lt;a href="/m-map/" data-role="button" data-icon="gear"&gt;Show Route&lt;/a&gt;
                  &lt;!--&lt;a href="#two" data-role="button" data-icon="gear"&gt;Show Route&lt;/a&gt;--&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Page Two (map) HTML:</strong></p>
  
  <pre><code>&lt;div data-role="page" data-title="Map" data-theme="b" class="page-map" style="width:100%; height:100%;"&gt;
      &lt;div data-role="header"&gt;&lt;h1&gt;Map&lt;/h1&gt;&lt;/div&gt;
      &lt;div data-role="content" style="width:100%; height:100%; padding:0;"&gt;
          &lt;div id="map_canvas" style="width:100%; height:100%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Relevant JS:</strong></p>
  
  <pre><code>$(".page-map").live("pagecreate", function() {
      wMobile = WayFinderMobile();
      if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position){
              wMobile.initialize(position.coords.latitude, position.coords.longitude, true);
          });
      } else {
          wMobile.initialize(38.94617, -92.32866);
      }
  });
  </code></pre>