How to integrate iframe maps responsive ?

In a Raw Text (HTML) copy/paste the following code :


With Google Maps:

<!-- Styles Flexible iFrame -->
<style>
.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%;}
</style>

<!-- Responsive iFrame -->
<div class="Flexible-container">
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.fr/maps?q=bordeaux&amp;oe=utf-8&amp;aq=t&amp;client=firefox-a&amp;ie=UTF8&amp;hl=fr&amp;hq=&amp;hnear=Bordeaux,+Gironde,+Aquitaine&amp;t=m&amp;z=11&amp;iwloc=A&amp;output=embed"></iframe>
</div>

See elements, arrangements and settings in simulated edition mode

With Bing Maps:

<!-- Styles Flexible iFrame -->
<style>
.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%;}
</style>

<!-- Responsive iFrame -->
<div class="Flexible-container">
    <iframe Name="mapFrame" scrolling="no" width="100%" height="512"  frameborder="0" src="//www.bing.com/maps/embed/?lvl=13&amp;cp=46.947954~7.444284&amp;sty=r&amp;draggable=true&amp;v=2&amp;dir=0&amp;where1=Bern%2C+Schweiz&amp;form=LMLTEW&amp;pp=46.948429107666016~7.440460205078125&amp;mkt=de-de&amp;gen=false&amp;emid=0268dbb0-0977-3717-0aff-4f79b8311370&amp;w=100%&amp;h=512"></iframe>
</div>

With Yahoo Maps:

<!-- Styles Flexible iFrame -->
<style>
.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%;}
</style>

<!-- Responsive iFrame -->
<div class="Flexible-container">
    <iframe  width="100%" height="512" frameborder="0" src="//fr.maps.yahoo.com/embed#lat=44.836632&lon=-0.58105&zoom=13&mvt=m&trf=1&tt=&q=Bordeaux&conf=1&start=1"></iframe>
</div>

The element can be moved anywhere in the page and all standard style properties can be applied (Borders, Margins, Colors)

© Source : Alistapart.com    |   Webdesignerwall.com    |   Niklaus Gerber