Javascript 谷歌地图不显示在我的网站上

我正试图在我的网站上实现谷歌地图。根据教程，我有什么是必要的，包括谷歌API键。然而，地图并没有像它应该的那样显示页面加载。帮忙

这是我的密码：

<div class="map-container">
        <div id="map" class="map-box"></div>
        <script>
            function initMap() {
            var uluru = {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
            }
        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=*******&callback=initMap"
        type="text/javascript"></script>
    </div>

尝试添加

html,body { 
   height: 100%;
   margin: 0;
   padding: 0;
}

---

在这里找到一个示例：

JavaScript:

var map;
var uluru = {lat: -25.363, lng: 131.044};
var marker;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  }),
  marker = new google.maps.Marker({
     position: uluru,
     map: map
  });
}

HTML:

---

您应该为map div设置实际大小，例如：style='height:400px；宽度：400px；'我试过了，但还是不行

var map;
var uluru = {lat: -25.363, lng: 131.044};
var marker;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  }),
  marker = new google.maps.Marker({
     position: uluru,
     map: map
  });
}

<div id class="map-container">
  <div id="map" class="map-box"></div>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.map-container {
    padding-left: 11%; 
    padding-right: 11%;
    width: 100%;
    height: 400px; 
    position: absolute;
    margin-top: 1%;
    margin-bottom: 5%;
}

.map-box {
    height: 100%;
    width: 100%;
 }