How to Make New Google Map Responsive

How to Make New Google Map Responsive
by Janeth Kent 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 Janeth Kent Date: 11-12-2013 google.maps webdesign trick coding hits : 11847  
 
Janeth Kent

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 END DEVELOPMENT.

 
 
 

Related Posts

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

How to watch deleted or private Youtube videos

Today we are going to talk about the technique which you permit to be able to recover videos from Youtube that was deleted, made private or simply blocked by Youtube…

The 6 Essentials for Creating a Visually Appealing Web Design

Creating a website might seem like a simple thing. After all, what do you really need besides a good hosting provider and relevant content, right? Well, the reality is quite…

Neumorphism (aka neomorphism) : new trend in UI design

This area, which arises from a basic human need, such as the urge to communicate, is constantly changing thanks to the advances of the technological era. Today, we invite you…

5 ways to improve your user experience

As a brand, UX is incredibly important when it comes to keeping your customers happy and on your site. Afterall, the longer they are on your site, the more likely…

10 Javascript tips and tricks you should know

Javascript is the most widely used language in fullstack development thanks to the boom in recent years in libraries and frameworks such as NodeJs (backend) and React/Angular/Vue (frontend). However, regardless…

CSS Shapes: how to create non-rectangular shapes (part 2)

The shape-image-threshold (Position Text Over A Semi-Opaque Image) So far we've looked at employing a fully transparent part of a picture or of a gradient so as to form our shape,…

CSS Shapes: how to create non-rectangular shapes (part 1)

CSS Shapes (Level 1) has been accessible in Chrome and Safari for various years, be that as it may, this week it sends in a creation form of Firefox with…

How to Choose a Laptop for Web Design and Development

Efficiency is important at work, no matter the type of job you do. The better the tools that you use, the more productive you are. So if you’re a web…

Guide to viewport units vw, vh, vmin and vmax

The viewport is the area where the browser renders the site. This is your screen minus the reserved space of the browser chrome. Sometimes you want to size an element…

6 Free Film Effect Photoshop Actions

Film and graphic lovers rejoice! Today we give us this little pack film effect Photoshop actions!  Photoshop actions allow designers to automate common sequences for increased efficiency. If you do much…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration