Gmap3 doesn't render properly in Bootstrap 3

Question

I use Gmap3 to display my map. My javascript code is:

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

The HTML markup is:

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

The result looks:

How can I fix this?

Answer 1

Add below lines in css file :-

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