谷歌地圖的作品，但沒有任何地圖顯示？

Question

我已將Google地圖嵌入到我的應用程序中。與地圖工作交互。迴應地圖活動作品（地圖zoom_changed，標記dragend等）。但是，只有地圖的某些部分可見（例如標記和Google徽標），但地圖本身不是（至少95％的時間沒有出現）。

誰能告訴我這裏發生了什麼？

EDIT：我使用這個作爲KnockoutJS組分（插入與<gui-map></gui-map>）。下面的源代碼。我不相信KnockoutJS的使用與地圖問題有任何關係，因爲：a）所有的可觀察物都被正確連線並且100％的時間工作;和b）地圖確實隨機工作，沒有任何代碼變化5％的時間。

define(['knockout', 'underscore'], function(ko, _){ 

    function Map(params, componentInfo) { 
     var self = this; 

     var defaultPosition = {lat:-25,lng:-130}; 
     var width = ko.isObservable(params.width) ? params.width : ko.observable(params.width ? params.width : '100px'); 
     var height = ko.isObservable(params.height) ? params.height : ko.observable(params.height ? params.height : '100px'); 
     var center = ko.isObservable(params.center) ? params.center : ko.observable(params.center ? params.center : defaultPosition); 
     var zoom = ko.isObservable(params.zoom) ? params.zoom : ko.observable(params.zoom ? params.zoom : 12); 
     var marker = ko.isObservable(params.marker) ? params.marker : ko.observable(params.marker ? params.marker : defaultPosition); 

     var element = componentInfo.element; 
     element.style.display = 'block'; 
     element.style.width = width(); 
     element.style.height = height(); 

     width.subscribe(function(){ 
      element.style.width = width(); 
     }); 

     height.subscribe(function(){ 
      element.style.height = height(); 
     }); 

     function onObservableCenterChanged(newValue){ 
      onObservableCenterChanged.changing = 1; 
      console.log('updating center map'); 
      map.setCenter(newValue); 
      setTimeout(function(){ 
       onObservableCenterChanged.changing = 0; 
      }, 500); 
     } 
     center.subscribe(onObservableCenterChanged); 

     function onObservableZoomChanged(newValue){ 
      onObservableZoomChanged.changing = 1; 
      console.log('updating map zoom'); 
      map.setZoom(newValue); 
      setTimeout(function(){ 
       onObservableZoomChanged.changing = 0; 
      }, 500); 
     } 
     zoom.subscribe(onObservableZoomChanged); 

     var map = new google.maps.Map(element, { 
      center: center(), 
      zoom: zoom() 
     }); 

     var mapMarker = new google.maps.Marker({ 
      position:center(), 
      map:map, 
      title:'', 
      draggable:true 
     }); 

     map.addListener('center_changed', (function(){ 
      var mapCenterChangeTimeout; 

      return function(){ 
       if (mapCenterChangeTimeout) { 
        clearTimeout(mapCenterChangeTimeout); 
       } 

       mapCenterChangeTimeout = setTimeout(function(){ 
        if (!onObservableCenterChanged.changing) { 
         var newCenter = map.getCenter(); 

         console.log('updating center observble'); 

         center({ 
          lat:newCenter.lat(), 
          lng:newCenter.lng() 
         }); 
        } 
       }, 500); 
      }; 
     })()); 

     map.addListener('zoom_changed', (function(){ 
      var mapZoomChangedTimeout; 

      return function(){ 
       if (mapZoomChangedTimeout) { 
        clearTimeout(mapZoomChangedTimeout); 
       } 

       mapZoomChangedTimeout = setTimeout(function(){ 
        if (!onObservableZoomChanged.changing) { 
         console.log('updating zoom observable'); 
         zoom(map.getZoom()); 
        } 
       }, 500); 
      }; 
     })()); 

     mapMarker.addListener('dragend', function(){ 
      var newPosition = mapMarker.getPosition(); 
      marker({ 
       lat:newPosition.lat(), 
       lng:newPosition.lng() 
      }); 
     }); 
    } 

    ko.components.register('gui-map', { 
     template:{ 
      require:'text!components/gui/map.html' 
     }, 
     viewModel:{ 
      createViewModel:function(params, componentInfo){ 
       return new Map(params, componentInfo); 
      } 
     } 
    }); 

}); 

EDIT2：我已經成功地得到了上述通過包裝Map功能的整個身體（與var self = this;分配的除外）中調用setTimeout()一個匿名函數（與5000毫秒的延遲工作）。但是，無論如何，所有代碼都會在DOMContentLoaded事件之後執行，所以我不確定這是一個問題。

Answer 1

問題的原因是，如果包含地圖的元素不可見，則Google Maps JavaScript API不會正確呈現地圖。在我的情況下，地圖位於隱藏標籤中。上面提到的超時解決了問題，因爲在調用Google Maps API的函數可以執行之前，延遲足以讓我切換標籤頁（如果我延遲打開標籤頁直到Google Maps API被調用之後，表面）。

我解決此問題得到了通過手動觸發調整大小的地圖上，並手動更新地圖上的各種控件，例如：

google.maps.event.trigger(map, 'resize'); 
infoWindow.setContent(infoWindowElement); 
infoWindow.close(); 
infoWindow.open(map, marker); 

我希望這個解決方案能夠幫助別人。