谷歌地图与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（类 - 缩略图）

回答

相关问题