Gmap3 在 Bootstrap 3 中无法正确渲染答案

【问题标题】：Gmap3 doesn't render properly in Bootstrap 3Gmap3 在 Bootstrap 3 中无法正确渲染
【发布时间】：2014-06-25 16:12:12
【问题描述】：

我使用 Gmap3 来显示我的地图。我的 JavaScript 代码是：

<script type="text/javascript">
     // create map - uses gmap3 jQuery plugin
     jQuery(document).ready(function($){
          $("#map_canvas").gmap3({
                map: {
                  options: {
                     maxZoom: 14
                  }
                },
                marker:{
                  values:[
                    {latLng:["49.6374729","13.167728600000032"], data:""},
                  ],
                  options: {
                    icon: new google.maps.MarkerImage(
                        "http://gmap3.net/skin/gmap/magicshow.png",
                          new google.maps.Size(32, 37, "px", "px")
                    )
                  }
                }
            },"autofit" );
        });
</script>

HTML 标记是：

<div class="col-md-6">
    <div id="map_canvas"></div>
</div>

结果看起来：

我该如何解决这个问题？

【问题讨论】：

标签： jquery jquery-gmap3

【解决方案1】：

在 css 文件中添加以下行：-

/* Bootstrap Css Map Fix*/
#mainBody #map img { 
  max-width: none;
}
/* Bootstrap Css Map Fix*/
#mainBody #map label { 
  width: auto; display:inline; 
}

Google Maps Doesn't Show Zoom Controls

【讨论】：