带有 Bootstrap 的 Google 地图（类 - 缩略图）

Question

我需要使用 Bootstrap 框架将 Google 地图 DIV 放入另一个 DIV。

但是我的代码不能正常工作。 Google Maps DIV 不在框架内（灰色框架）。

您建议进行哪些调整？任何建议将不胜感激。

下面是代码：

sn-p HTML（使用 Bootstrap 框架）：

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

Answer 1

问题来了：

#map_canvas{
  float: left;
}

您无需在 map_canvas div 上设置“浮动”。删除它或将其设置为“无”。我还注释掉了其他一些看起来不必要的东西。

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

Answer 2

在#map_canvas 之后添加一个清晰的 div

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>