html - template - responsive google map generator




Google Maps with Bootstrap not responsive (6)

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 and width: auto the map doesn't show up in the page.

Why?

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
#map_canvas {
   height: 400px;
    width: auto;
  }
</style>

<div class="container">
 <div class="row">
  <div class="span6">
   <div id="map_canvas"></div>
  </div>
 </div>
</div>

REVISED: The Official Post is outdated, so I've updated my answer and improved the code.

The following method does not require bootstrap or any other framework. It can be used independently to make any content responsive. To the parent element is applied a padding by calculating the aspect ratio. Then the child element is placed on top using absolute position.

The HTML:

<div class="iframe-container">
    <!-- embed code here -->
</div>

The CSS:

.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

The following 'fiddle' has examples on how to make:

  • Responsive Google Map
  • Responsive OpenStreetMap
  • Responsive Vimeo Video
  • Responsive Youtube Video

Demo: http://jsfiddle.net/LHQQZ/135/


Extremely simple. Make the map relative to viewport height using CSS:

.map {
  height: 80vh;
}

This specifies that the .map container must be 80% of the viewport height.


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>

This uses Bootstrap's Responsive Embed feature with fixed aspect ratio of 16/9:

<div class="embed-responsive embed-responsive-16by9">
    <div id="map_canvas" class="embed-responsive-item" style="border: 1px solid black"></div>
</div>


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




twitter-bootstrap