谷歌地圖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;