谷歌地图API v3地图不完全加载

Question

我有一些谷歌地图的一些困难。问题是，只有在地图的一小部分正在加载如下所示：

页面加载后，如果我调整浏览器甚至是轻微的量，这将导致整个地图刷新和负载正确，如下所示：

这里是我的javascript代码：

google.maps.event.addDomListener(window, 'load', initialize); 

$(document).ready(function(){        
    var $width = document.getElementById("propertysection").offsetWidth; 
    $('#map-canvas-2').width($width-28-175); 
    $('#map-canvas-2').height($width); 
    $('#myGridMap').height($width); 
}); 

function initialize() { 
    var map; 
    var propertyMap; 
    var marker; 
    var infowindow; 
     var myOptions = { 
      zoom: 6, 
      center:new google.maps.LatLng(50.7,-86.05), 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     } 
     map = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions);     
     infowindow = new google.maps.InfoWindow({ 
      content: 'Property Info', 
      position: new google.maps.LatLng(0, 0) 
     }); 
    } 

任何人都可以提出问题可能是什么？谢谢。

Answer 1

您不应该将jquery ready方法与窗口加载事件混合在一起（请参阅http://api.jquery.com/ready/）。

取而代之，您可以在.ready函数中调用初始化，或者将窗口调整大小函数放置在initialize方法本身中（初始化映射之前）。

Answer 2

我使用引导程序和一个大型菜单，我使用官方谷歌地图API异步加载函数解决了它。 https://developers.google.com/maps/documentation/javascript/tutorial#asynch

function initialize() { 

     var myLatLng = new google.maps.LatLng(37.4221147, -122.0867373); 

     var map_canvas = document.getElementById('map_canvas'); 

     var map_options = { 
      center: new google.maps.LatLng(37.4221147, -122.0867373), 
      zoom: 12, 
        mapTypeControl: false, 
        panControl: false, 
      zoomControlOptions: { 
         position: google.maps.ControlPosition.LEFT_CENTER 
      }, 
      streetViewControl: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(map_canvas, map_options); 

     var contentString = 
      '<b>Google Gate Bridge</b>' + 
      '<p>Mountain View, CA 94043, USA</p>'; 

     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
     }); 

     google.maps.event.addListener(marker, 'click', function(){ 
      infowindow.open(map,marker); 
     }); 

    } 

    function loadScript() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"; 
     document.body.appendChild(script); 
    } 

    var tab = document.getElementById('YourHtmlObjectID'); 
    YourHtmlObjectID.onmouseover = loadScript; 
    YourHtmlObjectID.onclick = loadScript;