Google Maps API v3地図が完全にロードされていません

Question

私はGoogleマップでいくつかの問題を抱えています。ページが読み込まれた後

を、私はブラウザに少しでもサイズを変更する場合、これはリフレッシュとロードするための完全なマップが発生します。問題はここに示すようなマップの小部分だけがロードされていることです正しく、ここに示すように：

ここでは私の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準備メソッドとウィンドウロードイベントを混在させないでください（http://api.jquery.com/ready/参照）。

代わりに.ready関数内からinitializeを呼び出すか、（mapを初期化する前に）initializeメソッド自体にwindow resize関数を配置してください。

Answer 2

私はブートストラップとメガメニューを使用しており、公式Google Maps 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;