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

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

Want me to help develop your next project or application?

Contact Us

Specializing in Ruby-on-Rails, Javascript, Multi-Platform Electron Desktop Apps and Hybrid Cordova Mobile Apps.

Recommended Posts