How to Make New Google Map Responsive

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.

 
 

tags: google.maps webdesign trick coding


We use our own cookies and third-party cookies to improve our services, show products based on your preferences, analyse the browsing habits of our users, and enable interaction with social networks. Continuing to browse our sites implies full acceptance of their use. You can change your cookie setting or get more information here: Cookies policy .