04. January 2013 | 0 minutes, 38 seconds

Responsive Google or Bing maps

If you are looking for an easy and fully responsive solution to embed Google or Bing maps on your website, you might want to try this CSS technique.

Apparently a lot of developers struggle to embed Google or Bing maps in responsive designs. As far I am concerned you can solve this with a very easy CSS technique.

CSS

Make sure you include the following CSS code on your website.

/* Flexible iFrame */

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

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

HTML

Place following HTML Code directly in your HTML <body>.

<!-- Responsive iFrame -->
<div class="Flexible-container">
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;iwloc=near"></iframe>
</div>

The DIV «responsive-iframe-container» is the responsive container for the map. You can also place it inside another DIV if you like. The map embed code will then be placed inside the «responsive-iframe-container» DIV. That is all. It will also work with any other iFrame embed.

Responsive design test

Google Maps example

Bing Maps example

Donation

I love to create and I won't ask for repayment. If you appreciate my work and would like to support me I am sure you will earn some extra Karma points.

Please donate

0

comments powered by Disqus