谷歌地圖只顯示在它的大小得到調整大小

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