Google지도 API - Google지도가 Twitter-Bootstrap 3 열에 완전히로드되지 않습니다.

Question

Google JavaScript API가로드 된지도가 있고 초기화시 완전히로드되지 않습니다. 나는이 문제가 일반적이라는 것을 알고 있지만, 사용 가능한 솔루션 중 어느 것도 나를 도왔다.

JS :

<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWTQpi0GTmb6hoIjbBlcGYfZLAkaDmqLI"> 
</script> 
<script type="text/javascript"> 

    var map; 

    function initialize() { 
     var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34.397, 150.644) 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

HTML :

이

<div class="col-md-12 col-xs-12"> 
    <div class="tabContactMap"> 
     <div id="map-canvas"> 

     </div> 
    </div> 
</div> 

LESS (유사하게 작동 CSS를 알고있는 사람을 쉽게 읽을 수 있어야한다) :

.tabContactMap { 
    height:500px; 
    #map-canvas { 
    width:100%; 
    height:100%; 

    } 
} 

html, body, .row, .col-xs-12 { height: 100% } 

내가 무엇을 얻을 :

제대로 작동하려면 어떻게해야합니까? 사용 가능한 솔루션을 모두 시도했지만 도움이되지 않았습니다.

Answer 1

의견을 말할 수 없으므로 답변으로 게시 해 드리겠습니다.

Chrome 및 Firefox에서 제공된 코드를 사용하여이 문제를 재현 해 보았는데 문제가없는 것 같습니다. 지도 캔버스는 높이와 너비가 있으며 부모의 높이도 고정되어 있기 때문에 왜 이런 일이 일어날 지 알 수 없습니다. 또한 네트워크 문제 일 수도 있습니다. 뿐만 아니라 JSbin에

작품 미세 : 링크 : http://jsbin.com/moqeyumane