How to Make New Google Map Responsive

Nowadays static maps (drawn by the guy who works at the ‘art department’) aren’t really used anymore. Using google maps allows you to zoom in/out, get directions,  have a satellite view or even streetview

There are many ways to include google maps and the most easy way is to use an iframe with the map embedded..

A lot of developers struggle to embed Google or Bing maps in responsive designs. As far we are concerned you can solve it by wrapping an additional element around our iframe

<div class="fluid-wrapper">
<iframe src="http://mapsengine.google.com/map/embed?mid=z-BEFzFo7gdM.kYdiUKVQpQQI" width="640" height="480"></iframe>
</div>

Then we size the wrapper using padding (a fluid height property won't work) and position the iframe within it:

.fluid-wrapper {

    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.fluid-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

This padding of 56.25% gives our container a 16:9 ratio, but you can make your Google Map rectangle whatever proportions you wish.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.