Html css

Responsive Google Maps

Posted by Weston Ganger on April 23, 2015

When I get put Google Maps in a page, I always want it to be responsive. Heres how its done.

And I hate to say it but I should note that this also works with Bing Maps


.responsive-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.responsive-container iframe, 
.responsive-container object, 
.responsive-container embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


<div class="responsive-container">
  ...your maps iframe/embed here...
</div>


Posted in HTML / CSS and Tagged with google maps responsive css bing 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts