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가 여기서 일하는 찾기 추가 :

,453,210

자바 스크립트 :

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