无法获得谷歌地图API v3完全加载在jQuery移动

Question

无法在jquery手机上加载谷歌地图。它确实会加载，但只有当你在浏览器上点击刷新时。我目前正在使用jquery。Mobile 1.3.1和jquery 1.9.1。我不知道该怎么做，因为我正在学习这些。

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);

map在另一个名为"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 -->

Answer 1

简介

为了能够在jQM页面上显示地图，您必须在页面显示事件期间显示它。这是因为正确的页面高度只能在该点计算。但即使这样，内容div也不会覆盖整个可用的表面，所以我们需要手动修复这个问题。这不是一个错误，这只是jQuery Mobile的工作方式。

<标题>工作示例

工作示例:http://jsfiddle.net/Gajotres/7kGdE/

<标题> 代码

函数 getrealcontenttheight 用于设置正确的内容高度。

$(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;
}

<标题>编辑

还有另一种不需要javascript的解决方案，它可以只使用CSS来完成。如果你想了解更多，请查看这里。您可能想看最后一个解决方案和示例。