2016-12-29 66 views
0

我正在使用Google Maps API和Bootstrap 3.3.7。並似乎無法找到一個工作解決方案實施地圖到我的col-md-6。 問題是,因爲我使用的是固定的導航欄,我不能把Google Maps API不顯示引導程序元素和固定導航欄

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

,因此我需要填充。

地圖顯示在頁面上,如果它是除了導航欄

代碼在這裏的唯一的事情:

<body> 
    <div class="outer"> 
    <div class="top"> 
     <div id="ukljuci"></div> 
     <div class="container-fluid"> 
     <div class="row"> 

      <div class="col-md-6" id="contprvi"> 
      some text just for demo. 
      </div> 

      <div class="clearfix visible-md"></div> 

      <div class="clearfix visible-md"></div> 

      <div class="col-md-6" id="contzadnji"> 
      <div id="map" style="width: 100%; height: 100%"></div> 
      </div> 

     </div> 
     </div><!-- container-fluid --> 
    </div> <!-- top --> 
</div> <!-- outer --> 

<script> 

function initMap() { 
     var uluru = {lat: -25.363, lng: 131.044}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      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=AIzaSyAPdCPG3NTb-GtlywfSQaHMnMCjKnLB6rk&callback=initMap"> 
</script> 


<script> 
    $("#ukljuci").load("izbornik_complete.php #nas_navbar"); 
</script> 

</body> 

附: #contprvi是自定義CSS是把這個容器上的屏幕 還左側,「ukljuci」是我工作的其他網頁上就好

回答

1

您需要設置固定的高度

 <div class="col-md-6" id="contzadnji"> 
     <div id="map" style="width: 100%; height: 300px"></div> 
     </div> 
+0

高度代碼是問題,非常感謝你! :) – anab1