I’ve been design a lot of websites for sport studio lately, and they often need google maps which uses iframes which by default only comes in 3 sizes: small @400px X 300px, medium @600px X 450px and large @800px X 600px. Which is great if you know the EXACT size of the end user’s screen size, since that’s not possible, we need to make them responsive with the little tiny bit of HTML and CSS

ORIGINAL
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d59067.01774355863!2d113.92182782515583!3d22.289782504003966!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sairport+near+Hong+Kong!5e0!3m2!1sen!2s!4v1425565266119" width="800" height="600" frameborder="0" style="border:0"></iframe>
NEW HTML
<div class="responsive-map"> 
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d59067.01774355863!2d113.92182782515583!3d22.289782504003966!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sairport+near+Hong+Kong!5e0!3m2!1sen!2s!4v1425565266119" width="800" height="600" frameborder="0" style="border:0">
</iframe>
</div>
NEW CSS
<style>
 .responsive-map {
 position: relative;
 padding-bottom: 75%; // This is the aspect ratio
 height: 0;
 overflow: hidden;
 }
 .responsive-map iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100% !important;
 height: 100% !important;
 }
</style>

The Result

 

Thank you for this handy script from Digital Inspiration

About

About Chi Wai LI

Happily accept I'm a #geek but hate to sit still all day. Digital Creative and Founder of Getfit.hk. #HongKong

Say something constructive