Google지도가 부트 스트랩 페이지에 표시되지 않습니다.

Question

부트 스트랩 CSS를 기반으로 웹 페이지에 Google지도가 삽입됩니다. 다음은 map-canvas의 id를 사용하는 코드입니다. 페이지가 javacript 기능을로드 한 후

<div class="container-fluid"> 
     <div class="row" style="height:100%;"> 
      <div class="col-sm-3 col-md-2 sidebar"> 
       <ul class="nav nav-sidebar"> 
        <li class="active"><a href="#">Overview</a></li> 

       </ul> 
      </div> 
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height:100%; width:100%;"> 

       test 
       <div style="height:100%; width:100%;"> 
       <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
       <div id="map-canvas" style="height:100%">s</div> 
       </div> 

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

는지도 캔버스의 ID를 얻을 구글에서 검색지도로 대체하는 호출됩니다. 문제는지도가 표시되지 않고 다른 컨테이너의 너비 또는 높이와 관련된 일부 문제에 달려 있다고 생각합니다. 어떻게 수정해야합니까? 여기

는

var map; 
function initialize() { 
    var markers = []; 
    var mapOptions = { 
     center : new google.maps.LatLng(43.77, 11.24), 
     zoom : 4, 
     scrollwheel : false, 
     mapTypeId : google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 
    console.log("test"); 
    console.log(map); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 

[upate] 은 다음과 같이 변경 자바 스크립트의 일부입니다 :

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height:100%; width:100%;"> 


       <div class="row" style="100px;"> 
       <div style="height:100%; width:100%;"> 
       <div id="map-canvas">s</div> 
       </div> 
       </div> 
      </div> 
</div> 

그러나

Answer 1

지도 캔버스 또는 그 부모가 작동하지 않습니다 괜찮은 키가 있어야합니다.

<div id="map-canvas" style="height:100px;"></div> 

노트 대신에 공간을 예약합니다이 사업부하여 "최소 높이"로 설정 %

Answer 2

의 px을 시도, 당신은 당신의 레이아웃에 따라 최소 높이를 조정해야합니다.

#map { 
    min-height: 500px; 
    width: 100%; 
    height:100% 
} 

<div class="col-md-7"> 
    <div id="map"></div> 
</div>