Google Maps API未正确加载[重复]

Question

我有一个问题与我的代码和加载一个嵌入式谷歌地图API与样式。请参阅下面的代码和我加载网页时发生的事情的屏幕截图。

<section class="container-fluid text-center">
        <div class="row">
             <div class="col">
                <div id="map" style="height: 100%;
            width: 750px;"></div>
            </div>
        </div>
    </section>


            <script>
                function initMap(){
                    var latlng = { lat:40.589493, lng:-75.603426 };
                var map = new google.maps.Map(document.getElementById('map', {
                    center: latlng,
                        zoom: 8,

                }));
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                marker.addListener('click', function() {
                        infowindow.open(map, marker);
                    });
                }
            </script>

            <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>

https://i.stack.imgur.com/TqthU.png

Answer 1

确保地图分区具有适当的高度和宽度

<div class="col">
    <div id="map" style='width: 400px; height: 400px;'></div>
</div>