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

<div class="map_container">
    <div id="map" class="gmaps4rails_map">
        <div id="map_canvas" class="span9">
            <%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
        </div>
    </div> 

Answer 2

makes the map resize in both height and width:

http://niklausgerber.com/blog/responsive-google-or-bing-maps/

2018/09/27 update: link is reportedly down, not sure for how much, so I'll link my web archive search to his github:

https://github.com/niklausgerber/responsive-google-or-bing-maps

Answer 3

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:

<div class="map_container">
  <div id="map" class="gmaps4rails_map">
    <div id="map_canvas" class="span9">
      <%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
    </div>
  </div> 
</div>