Html 谷歌地图Javascript的可视化效果不好

我在我的网站上添加了一张谷歌地图，但我不知道为什么它会拉伸，里面会有灰色的部分和圆形的边框

这是HTML代码：

<div class="p-5 col-6 d-flex flex-column justify-content-between">
    <div class="d-flex justify-content-center map-container">
        <div id="map"></div>
    </div>
</div>
<script type="text/javascript">
        var map;
        function initMap() {
            // Create the map with no initial style specified.
            // It therefore has default styling.
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: 38.9340635, 
                    lng: 16.2328417
                },
                zoom: 10,
                scrollwheel: false,
                dropPins: true,
                panBy: [0,0],
                tilt: 0,
                heading: 0,
                mapType: 'roadmap',
                panControl: false,
                zoomControl: false,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false,
                plusMinusZoom: false
            });
        }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCAeasy64XNqw6_DVPPmqX1cnqJNqSu7CU&callback=initMap" async defer></script>

下面是它的外观：

---

发生了什么事？

我对地图同一部分中的图像使用CSS规则

border-radius: 15px;
max-height: 40%;

---

我解决了这个问题，为该映像创建了一个类，并将这些规则分配给该类。

我认为您的引导flex类一定弄乱了它。删除这些父元素，只需保留

#map

。它看起来正常吗？请包括所有代码来重新处理该问题。相关问题：你为什么否决这个问题？这是一个真正的问题！请不要否决这个问题，这对我来说是个真正的问题。如果我有什么问题，请评论之前。

border-radius: 15px;
max-height: 40%;