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.