Google Maps with Bootstrap not responsive

Question

I\'m using bootstrap and I embedded Google Maps API 3.

#map_canvas isn\'t responsive; it\'s a fixed width.

Also, if I use height: auto

Answer 1

Smartik's answer works well.. I am using the gmaps4rails gem and applied these changes to the generated css like this:

.map_container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
display: block;
}

.gmaps4rails_map {
  display: block;
  height: 400px;
}

Then added these lines to my view:

  

    

      <%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>