Google地图仅在其大小调整后才会显示

Question

我正在我的网页上加载一些宽度和高度的谷歌地图。这是我的代码：

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

我认为您错过了drawingManager.setMap(map);功能结束时的initMap。