Gmap3无法在Bootstrap 3中正确呈现

Question

我使用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>

结果如下：

我该如何解决这个问题？

Answer 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