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

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.

Answer 2

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/

Answer 3

This blog post has a great solution.

Add a div tag around the embed code. Use the CSS class map-responsive so that your code now looks like this:

<div class="map-responsive">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Now add some CSS properties inside one of your stylesheet files:

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Answer 4

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>

Answer 5

If someone else look this, had a problem like that.

I had an iframe whit an openstreet map, and i couldn't make it responsive. I finally put a "img-responsive" class and all was good.

<iframe class="img-responsive" width="350" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="YOUR OPENSTREET URL HERE" style="border: 1px solid black"></iframe>

Answer 6

You could give the span6 class a width and height, then give map_canvas a width and height of 100%.