谷歌地圖與Bootstrap（類 - 縮略圖）

我需要把谷歌地圖DIV內的另一個DIV使用Bootstrap框架。谷歌地圖與Bootstrap（類 - 縮略圖）

但我的代碼無法正常工作。 Google地圖DIV超出了框架（灰色框）。

你推薦哪些調整？任何建議，將不勝感激。

下面是代碼：

片斷HTML（自舉框架）：

<div class="thumbnail"> 
    <img src="images/title2015.jpg" class="img-responsive"> 
    <div class="caption"> 

     <h4><span class="glyphicon glyphicon-map-marker"></span>&nbsp;Google Maps:</h4> 

     <div id="map_canvas" name="map_canvas"></div> 

    </div> 
</div>

CSS：

#map_canvas{ 
    width: 100%; 
    height: 260px; 
    float: left; 
    position: relative; 
    background-color: #f0f0f0; 
    overflow: hidden; 
    -webkit-transform: translateZ(0); 
}

的Javascript：

<script> 
    function initialize() { 
     var map_canvas = document.getElementById('map_canvas'); 
     var myLatLng = new google.maps.LatLng(??.??????, ??.??????); 
     var map_options = { 
      center: myLatLng, 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(map_canvas, map_options); 

     var marker = new google.maps.Marker({ 

      position: myLatLng, 
      map: map, 
      title: 'Localization' 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

來源

2015-10-07 Ralph MacLand

這裏的問題是：

#map_canvas{ 
    float: left; 
}

沒有必要爲你對map_canvas提供DIV一個「浮動」。刪除它或將其設置爲「無」。還有一些其他看起來不必要的我已經註釋掉了。

https://jsfiddle.net/partypete25/j5pcptb4/1/

來源

2015-10-07 02:13:07 partypete25

＃partypete25，完美！我是後端開發人員（C＃，C-ANSI，C++，SQL Server等）。在他的迴應後，我意識到我需要學習更多的前端技術（CSS，Javascript，jQuery，HTML等）。謝謝。 –

添加一個明確的div #map_canvas

CSS

.clear 
    { 
      Clear: both; 
    }

HTML

<div class="thumbnail"> 
    <img src="images/title2015.jpg" class="img-responsive"> 
    <div class="caption"> 

     <h4><span class="glyphicon glyphicon-map-marker"></span>&nbsp;Google Maps:</h4> 

     <div id="map_canvas" name="map_canvas"></div> 
    <div class="clear"></div> 

    </div> 
</div>

後

或添加clearfix類縮略圖DIV

<div class="thumbnail clearfix"> 
    <img src="images/title2015.jpg" class="img-responsive"> 
    <div class="caption"> 

     <h4><span class="glyphicon glyphicon-map-marker"></span>&nbsp;Google Maps:</h4> 

     <div id="map_canvas" name="map_canvas"></div> 

    </div> 
</div>

來源

2015-10-07 01:45:18 Alex

#alireza safian，完美！我是後端開發人員（C＃，C-ANSI，C++，SQL Server等）。在他的迴應後，我意識到我需要學習更多的前端技術（CSS，Javascript，jQuery，HTML等）。謝謝。 –

谷歌地圖與Bootstrap（類 - 縮略圖）

回答

相關問題