Googleマップが私のサイトに表示されません

Question

私は自分のサイトにGoogleマップを実装しようとしています。チュートリアルによると、私はGoogle APIキーを含む必要があります。しかし、マップはページの読み込みが表示されないようにしています。助けて？ここで

は私のコードです：これは私のCSSで

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

.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%; 
} 

Answer 1

てみ

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

Answer 2

は例のjsfiddleはここで働いて下さい追加：

https://jsfiddle.net/n8a84wh8/1/

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

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

CSS：スタイル= '高さ：

/* 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%; 
}