谷歌地圖不顯示在自舉頁面

我正在基於引導CSS嵌入谷歌地圖的網頁。下面是他使用map-canvas的代碼。谷歌地圖不顯示在自舉頁面

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

頁面加載一個javacript功能後調用其獲取地圖畫布的ID，並與谷歌從檢索到的地圖替代它。問題是地圖沒有顯示，我想這取決於與不同容器的寬度或高度有關的一些問題。我應該如何解決它？

這裏有一塊的JavaScript

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>

但它不工作

來源

2014-05-18 lowcoupling

請更新它以包含JavaScript代碼。如果不知道代碼在做什麼，就無法知道它爲什麼會失敗。 – jeremcc

我已經添加了javascript – lowcoupling

的一個相關部分ive建議了一個答案，如果這沒有辦法，請提供一個小提琴或至少控制檯輸出（例如Chrome-> F12->控制檯） – nozzleman

地圖帆布或者其父母必須有一個體面的高度。嘗試

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

注意px代替%

來源

2014-05-19 12:29:40 nozzleman

我已經嘗試過，但它不起作用。謝謝你的親切幫助我真的不知道我的問題 – lowcoupling

好吧，沒有大的爲了保持良好的效果，你有沒有嘗試給map-canvas div 100px的高度？因爲我多次遇到這個錯誤... – nozzleman

通過這個div設置「最小高度」將預留空間，則需要調整最小高度，按您的佈局。

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

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

來源

2017-03-30 05:59:30

雖然這段代碼可能回答這個問題，但最好包含一些上下文，解釋它如何工作以及何時使用它。從長遠來看，僅有代碼的答案是沒有用的。 – Michael

谷歌地圖不顯示在自舉頁面

回答

相關問題