Unable to get Google Maps API v3 to completely load on jQuery Mobile

问题

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.

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 <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 37.789241, -122.41073, 'images/electric.png'],

            ['San Francisco: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 37.806992, -122.41051, 'images/electric.png'],

            ['San Francisco: Gas Interruption <br> Reported: 9:30am <br> Estimated Restore Time: 12:00am', 37.789241, -122.41073, 'images/gas.png'],

            ['San Francisco: Planned Maintenance <br> Time: 9:00am to 2:30pm ', 37.784748, -122.468982, 'images/maintenance.png'],

            ['Shingletown: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 40.4923784, -121.8891586, 'images/electric.png'],

            ['San Mateo: Maintenance <br> Time: 10:00am to 12:00pm', 37.5629917, -122.3255254, 'images/maintenance.png'],

            ['Concord: Power Outage <br> Reported: 11:10pm <br> Estimated Restore Time: 4:00am', 37.9779776, -122.0310733, 'images/electric.png'],

            ['Hayward: Power Outage <br> Reported: 11:10pm <br> Estimated Restore Time: 4:00am', 37.6688205, -122.0807964, 'images/electric.png'],

            ['Alameda: Maintenance <br> Time: 9:00am to 3:30pm', 37.7652065, -122.2416355, 'images/maintenance.png'],
        ];

        //add marker to each locations
        for (i = 0; i < 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);

The map is within another container called "page"

<div class="page" data-role="page" id="map_main">
  <!-- navagation -->
  <div data-theme="a" data-role="header" data-position="fixed">
      <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">
          Main
      </a>
      <h3>
          Outage Map
      </h3>
  </div>
  <!-- navagation -->

  <!-- Map -->
  <div class="map_image" id="outage_map"></div>    
  <!-- Map -->

回答1:

Intro

To be able to show map on jQM page you MUST show it during the pageshow event. This is because correct page height can be calculated only at that point. But even then content div will not cover whole available surface so we need to fix this manually. This is not an error it is simply how jQuery Mobile works.

Working example

Working example: http://jsfiddle.net/Gajotres/7kGdE/

Code

Also function getRealContentHeight is used to set correct content height.

$(document).on('pageshow', '#index',function(e,data){   
    $('#map_canvas').css('height',getRealContentHeight());

   // This is the minimum zoom level that we'll allow
   var minZoomLevel = 12;

   var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   // Bounds for North America
   var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(28.70, -127.50), 
     new google.maps.LatLng(48.85, -55.90)
   );

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

   // Limit the zoom level
   google.maps.event.addListener(map, 'zoom_changed', function() {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
   });  

});

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

Edit

There's also another solution that don't requires javascript and it can be done only with a CSS. If you want to find out more take a look HERE. You would want to look at a last solution and example.

来源：https://stackoverflow.com/questions/16470980/unable-to-get-google-maps-api-v3-to-completely-load-on-jquery-mobile