谷歌地图只显示在它的大小得到调整大小

Question

我加载谷歌地图在我的网页有一些宽度和height.Here是我的代码：

function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
     }); 
     //google.maps.event.trigger(map, 'resize'); 
     /*$(window).resize(function() {   
      google.maps.event.trigger(map, "resize"); 
      });*/ 
     var drawingManager = new google.maps.drawing.DrawingManager({ 
      drawingMode: google.maps.drawing.OverlayType.MARKER, 
      drawingControl: true, 
      drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: ['polygon', 'polyline'] 
      }, 

      circleOptions: { 
      strokeColor: '#00DB00', 
      fillColor: 'green'  
      } 

     }); 
     drawingManager.setMap(map); 
     } 

风格：

#map{ 
width:500px; 
height:300px; 
} 

HTML：

<div class="cl col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
     <div id="map"></div> 
</div> 

当我加载网页，地图显示这样

调整大小后，地图显示正确。

这里有什么问题？

Answer 1

我想你在initMap函数的末尾缺少drawingManager.setMap(map);。