Google地图无法加载

Question

Map wont load on my website 'till browser window is resized

Here is my JS code

<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>

And here is CSS

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

When I remove .map-cont { margin-left: 10%; } .map-cont { margin-left: 10%; } it works fine, but I don't need it fullscreen.

Answer 1

I would try adjusting the css and include these lines lines.

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

The google maps api wants to explicitly define the height and width of the map, and at times this can cause complications.

Answer 2

The problem with the sizing issue was that the

      style="width:100%;height:400px;background:yellow"></div>
      <script>