title: Multiple maps not working with jqueryMobile, phonegap and google maps
body: <p>I'm creating a mobile app with jQueryMobile alpha 3, latest phonegap and using google maps. Maps are used in three places. First I can change my location. Secondly I can show results of search on map. Finally I can view single result's location on map. When I use them separately - everything works fine. But when I try to check my location and then try to display results on map I receive the following view :</p>
  
  <p><a href="http://images.virtualdesign.pl/images/96594gmap.png" rel="nofollow">http://images.virtualdesign.pl/images/96594gmap.png</a></p>
  
  <p>Still finding location of single result works just fine. Also going from the other side - first results on map and then checking my location - result is just the same. Location from the navigator or my search engine is proper, in firebug map looks also initialized properly. Any ideas what might be wrong ?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var searchObjects = [],
      searchParameter = 0,
      states = {},
      localization;
      var mobi = $.mobile; 
  
      function onSuccess(position){
          localization = {'latitude': position.coords.latitude,
                          'longitude': position.coords.longitude };
          mobi.pageLoading(true);
          mobi.changePage('map.htm');
          return false;     
      }
  
      function onError(error) {
          mobi.pageLoading(true);
          alert('Unable to get location.');
      }  
  
      $('.page-link').live("click", function() {
          if (!!navigator.geolocation){
              mobi.pageLoading(false);
              navigator.geolocation.getCurrentPosition(onSuccess, onError, { timeout: 15000, enableHighAccuracy: true });
          }
      });
  
      $('.page-map').live("pagecreate", function() {
          if(localization){
              initialize(localization.latitude, localization.longitude, 0);
          }         
      });
  
      $('.page-map-results').live("pagecreate", function() {
          initializeResults(searchObjects);
      });
  
      function initialize(lat,lng, loc){      
          var latlng = new google.maps.LatLng(lat, lng),
          map1, myOptions,marker;
  
          myOptions = {
              zoom: 15,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          marker = new google.maps.Marker({
              position: latlng,
              map: map1
          });
  
          if(!loc){
              map1 = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
          }
          else{
              map1 = new google.maps.Map(document.getElementById("map_localization"),myOptions);
          } 
  
          marker.setMap(map1);
          return map1;
      }
  
      function initializeResults(data_map){
  
          var latlng = new google.maps.LatLng(51.961869,19.134521);
          var myOptions = {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };              
          var map2 = new google.maps.Map(document.getElementById("map_canvas2"),myOptions);
  
          var icon1,     
          bounds = new google.maps.LatLngBounds(),
          maxlng = 0,
          maxlat = 0,
          minlng = 0,
          minlat = 0,
          positions = 0;
  
          icon1 = 'images/map_icon.png';     
  
          for(var i=0; i &lt; data_map.length; i++){
              var pos_lat = parseFloat(data_map[i]['lat']);
              var pos_lon = parseFloat(data_map[i]['lon']);
              if(!isNaN(pos_lat) &amp;&amp; !isNaN(pos_lon)){               
                  positions = 1;
                  addMarker(pos_lat, pos_lon, icon1);
                  if(pos_lat &lt; minlat || minlat==0){ 
                      minlat = pos_lat
                  }
                  if(pos_lat &gt; maxlat || maxlat==0){ 
                      maxlat = pos_lat
                  }
                  if(pos_lon &lt; minlng || minlng==0){
                      minlng = pos_lon
                  }
                  if(pos_lon &gt; maxlng || maxlng==0){
                      maxlng = pos_lon
                  }
                  lat = minlat + (( maxlat - minlat)/2);
                  lng = minlng + (( maxlng - minlng)/2);
                  var allpoints = new google.maps.LatLng(pos_lat, pos_lon);
                  bounds.extend(allpoints);
              }
          }     
  
          if(positions){
              map2.fitBounds(bounds);         
          }
  
          function addMarker(lat, lon, icon){
              var latlng = new google.maps.LatLng(lat, lon);
              var marker = new google.maps.Marker({
                  position: latlng,
                  map: map2,
                  icon: icon
              });            
              marker.setMap(map2);
          }
          return map2;
      }    
  &lt;/script&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;  &lt;/script&gt;
  </code></pre>
  
  <p>And templates for both maps :</p>
  
  <pre><code>&lt;div data-role="page" data-theme="a" class="page-map" style="width:100%; height:100%;"&gt;
      &lt;div data-role="header"&gt;&lt;h1&gt;Gdzie jestem&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;
  
  &lt;div data-role="page" data-theme="a" class="page-map-results" style="width:100%; height:100%;"&gt;
      &lt;div data-role="header" class="header"&gt;&lt;h1&gt;Wyniki&lt;/h1&gt;&lt;/div&gt;
      &lt;div data-role="content" style="width:100%; height:100%; padding:0;"&gt; 
          &lt;div id="map_canvas2" style="width:100%; height:100%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Just a quick walkthrough through the code - <code>page-map</code> is the localization map initialized with <code>page-link</code>. <code>page-map-results</code> is the second template for displaying results. If <code>initialize</code> gets <code>loc</code> parameter it shows the third map - localization of single result.</p>