How to Make New Google Map Responsive

by admin admin Date: 11-12-2013 google.maps webdesign trick coding


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.

 
by admin admin Date: 11-12-2013 google.maps webdesign trick coding hits : 10404  
 
 
 
 

Related Posts