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

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:

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