title: Unable to get Google Maps API v3 to completely load on jQuery Mobile
body: <p>Couldn't load google maps on jquery mobile. It does load, but only when you hit refresh on browser. I am currently using jquery.mobile 1.3.1 and jquery 1.9.1. I am not sure how to do this because I am learning all this.</p>
  
  <pre><code>function initialize() {
  
          //add map, the type of map
          var map = new google.maps.Map(document.getElementById('outage_map'), {
              zoom: 9,
              center: new google.maps.LatLng(37.7749295, -122.4194155),
              disableDefaultUI: true,
              mapTypeId: google.maps.MapTypeId.TERRAIN
          });
  
          var $map = $('#outage_map');
          $map.height( $(window).height(200) - $map.offset().top );
  
          //declare marker call it 'i'
          var marker, i;
  
          //declare infowindow
          var infowindow = new google.maps.InfoWindow({
              maxWidth: 250,
          });
  
          //add locations
          var locations = [
              ['San Francisco: Power Outage &lt;br&gt; Reported: 9:00am &lt;br&gt; Estimated Restore Time: 12:00pm', 37.789241, -122.41073, 'images/electric.png'],
  
              ['San Francisco: Power Outage &lt;br&gt; Reported: 9:00am &lt;br&gt; Estimated Restore Time: 12:00pm', 37.806992, -122.41051, 'images/electric.png'],
  
              ['San Francisco: Gas Interruption &lt;br&gt; Reported: 9:30am &lt;br&gt; Estimated Restore Time: 12:00am', 37.789241, -122.41073, 'images/gas.png'],
  
              ['San Francisco: Planned Maintenance &lt;br&gt; Time: 9:00am to 2:30pm ', 37.784748, -122.468982, 'images/maintenance.png'],
  
              ['Shingletown: Power Outage &lt;br&gt; Reported: 9:00am &lt;br&gt; Estimated Restore Time: 12:00pm', 40.4923784, -121.8891586, 'images/electric.png'],
  
              ['San Mateo: Maintenance &lt;br&gt; Time: 10:00am to 12:00pm', 37.5629917, -122.3255254, 'images/maintenance.png'],
  
              ['Concord: Power Outage &lt;br&gt; Reported: 11:10pm &lt;br&gt; Estimated Restore Time: 4:00am', 37.9779776, -122.0310733, 'images/electric.png'],
  
              ['Hayward: Power Outage &lt;br&gt; Reported: 11:10pm &lt;br&gt; Estimated Restore Time: 4:00am', 37.6688205, -122.0807964, 'images/electric.png'],
  
              ['Alameda: Maintenance &lt;br&gt; Time: 9:00am to 3:30pm', 37.7652065, -122.2416355, 'images/maintenance.png'],
          ];
  
          //add marker to each locations
          for (i = 0; i &lt; locations.length; i++) {
              marker = new google.maps.Marker({
                  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                  map: map,
                  icon: locations[i][3]
              });
  
              //click function to marker, pops up infowindow
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                  return function() {
                      infowindow.setContent(locations[i][0]);
                      infowindow.open(map, marker);
                  }
              })(marker, i));
          }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>The map is within another container called "page"</p>
  
  <pre><code>&lt;div class="page" data-role="page" id="map_main"&gt;
    &lt;!-- navagation --&gt;
    &lt;div data-theme="a" data-role="header" data-position="fixed"&gt;
        &lt;a data-role="button" data-direction="reverse" data-transition="slide"
        href="index copy.html" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left"&gt;
            Main
        &lt;/a&gt;
        &lt;h3&gt;
            Outage Map
        &lt;/h3&gt;
    &lt;/div&gt;
    &lt;!-- navagation --&gt;
  
    &lt;!-- Map --&gt;
    &lt;div class="map_image" id="outage_map"&gt;&lt;/div&gt;    
    &lt;!-- Map --&gt;
  </code></pre>
  
  <p></p>