Javascript 谷歌地图仅在其大小调整后显示

我正在将谷歌地图加载到我的网页中，具有一定的宽度和高度。以下是我的代码：

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:

当我加载页面时，地图显示如下

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

---

这里有什么问题？

我认为您缺少了

drawingManager.setMap（map）

在您的

initMap

函数的末尾。

不，实际上我只错过了这里。@downvoter否决我的问题的原因是什么？

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