Google Map wird auf meiner Site nicht angezeigt

Question

Ich versuche eine Google Map auf meiner Site zu implementieren. Laut dem Tutorial habe ich was nötig ist inklusive dem Google API Schlüssel. Die Karte wird jedoch nicht so angezeigt, wie sie geladen werden sollte. Hilfe?

Hier ist mein Code:

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

Das ist mein CSS

ist

.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

Try

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

Answer 2

finden jsfiddle des Beispiels Zugabe von hier zu arbeiten:

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: style = 'height:

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