javascript - 谷歌地图无法加载

Question

在调整浏览器窗口大小之前， map 不会在我的网站上加载

这是我的 JS 代码

<div class="map-cont">
        <div id="map" class="location-container map-padding" style="width:100%;height:400px;background:yellow"></div>
          <script>
          function initMap() {
            var uluru = {lat: 45.4420432, lng: 15.999982};
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 15,
              center: uluru,
              scrollwheel: false
            });
            var marker = new google.maps.Marker({
              position: uluru,
              map: map
            });
          }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEQc2mBnThiUz-Pj472iG1i2FyqJvNb00&callback=initMap">
        </script>
    </div>

这是 CSS

#map { width: 100% !important; }
.map-cont { margin-left: 10%; }

当我删除 .map-cont { margin-left: 10%; } 它工作正常，但我不需要全屏显示。

Answer 1

我会尝试调整 css 并包含这些行。

   #map {
    width: 100%;
    height: 100%;
   }
   html,body{
     height: 100%;
     margin:0px;
   }

谷歌地图 API 想要明确定义 map 的高度和宽度，有时这可能会导致复杂化。