title: Map view is not loading with PhoneGap
body: <p>I am developing an iPhone application using PhoneGap and jQueryMobile, in my application I have two html pages, first is index.html page and second is mapView.html, now, my problem is when I open mapView.html from index.html using</p>
  
  <pre><code>function loadMap() {
          $.mobile.changePage( "mapView.html", { transition: "pop"} );
  }
  </code></pre>
  
  <p>map is not loading. If I open mapView.html on any browser it works perfectly, even if I load mapView.html directly by changing <br>
  <code>self.viewController.startPage = @"mapView.html";</code>
  <br> in appDelegate class map loads on screen. Do anyone have any idea why map is not loading when I open it from another .html page?My PhoneGap version is 2.0.0<br>
  Thanks.</p>
  
  <p><B>EDIT 1:</B>mapView.html code<br><br></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Map Location&lt;/title&gt;
          &lt;link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /&gt;
          &lt;script type="text/javascript" src="jquery-1.7.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="jquery.mobile-1.1.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;language=en"&gt; &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
              var demoCenter = new google.maps.LatLng(41,-87);
  
              var map;
              function initialize()
              {
                  map = new google.maps.Map(document.getElementById('map_canvas'), {
                                            zoom: 7,
                                            center: demoCenter,
                                            mapTypeId: google.maps.MapTypeId.ROADMAP
                                            });
              }
  
              function addMarkers()
              {
                  // perform your AJAX here. In this example the markers are loaded through the cityList array
                  $.ajax({
                         type:'post',
                         url:'test.html',
                         data:'',
                         success:function(data)
                         {
  
                         // imagine that the data in this list
                         // will be retrieved from the AJAX response
                         // i used the cityList array just for testing
                         var cityList = [
                                         ['Chicago', 41.850033, -87.6500523, 1],
                                         ['Illinois', 40.797177,-89.406738, 2]
                                         ];
  
                         var marker, i;
                         var infowindow = new google.maps.InfoWindow();
                         for (i = 0; i &lt; cityList.length; i++) 
                         {  
                         marker = new google.maps.Marker({
                                                         position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                                                         map: map,
                                                         title: cityList[i][0]
                                                         });
  
                         google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                                                         return function() {
                                                                         infowindow.setContent(cityList[i][0]);
                                                                         infowindow.open(map, marker);
                                                                         }
                                                                         })(marker, i));
                         }
                         }
                         });
              }
  
              $(document).ready(function() 
                                {
                                addMarkers();
                                });
              &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="initialize()"&gt;
          &lt;div id="basic-map" data-role="page"&gt;
              &lt;div data-role="header" data-theme="b"&gt;
                  &lt;h1&gt;Map Location&lt;/h1&gt;
                  &lt;a data-rel="back"&gt;Back&lt;/a&gt;
              &lt;/div&gt;
              &lt;div data-role="content"&gt;   
                  &lt;div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"&gt;
                      &lt;div id="map_canvas" style="height:350px;"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;      
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>