谷歌地图的作品，但没有任何地图显示？

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

我希望这个解决方案能够帮助别人。