About design and nearby

Responsive Google Map, or How to Resize an iframe

Posted: December 10th, 2013 | Author: | Filed under: Tips and Tricks | Tags: , , , | No Comments »

Everybody these days wants the website which is compatible to all screen resolutions. And integration of 3rd-party content through embed elements like ‘iframe’, ‘object’, ’embed’ tags sometimes is tricky. Designer should set a relative width for elements of the responsive design and the embed code contains a fixed width and height in pixels usually. That becomes a problem, but often you have no alternative – for example, if you have to implement google map on website.

Fortunately, there are two methods how to apply the responsiveness to the google map.

The HTML code:

  1. <div class="responsive-container">
  2.                             <iframe width="700" height="435" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=florida+miami&amp;aq=&amp;sll=40.150456,-76.888268&amp;sspn=0.015335,0.02929&amp;gl=US&amp;ie=UTF8&amp;hq=&amp;hnear=Miami,+Miami-Dade,+Florida&amp;t=m&amp;ll=25.789072,-80.226288&amp;spn=0.134471,0.239983&amp;z=12&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=florida+miami&amp;aq=&amp;sll=40.150456,-76.888268&amp;sspn=0.015335,0.02929&amp;gl=US&amp;ie=UTF8&amp;hq=&amp;hnear=Miami,+Miami-Dade,+Florida&amp;t=m&amp;ll=25.789072,-80.226288&amp;spn=0.134471,0.239983&amp;z=12" style="color:#0000FF;text-align:left">View Larger Map</a></small>
  3. </div>

The 1st method:
The fluid columns on your responsive design set the relative size. In the frame you have the fixed size already and you should override that to the greatest size your grid permits (the iframe tells the parent element how big it is):

  1. iframe, object, embed {
  2.         max-width: 100%;
  3. }

The 2nd method:
If you want to keep the ratio of the embed element (how to resize a video on the fly is described on the A List Apart article “Creating Intrinsic Ratios for Video”):

– Wrap the iframe code in container element:

  1. <div class="responsive-container">…</div>

– Add style to this container:

  1. .responsive-container
  2. {
  3.     position: relative;
  4.     padding-bottom: 56.25%; /* 16/9 ratio */
  5.     padding-top: 30px; /* IE6 workaround*/
  6.     height: 0;
  7.     overflow: hidden;
  8.     }

– Add style to the embed element:

  1. .responsive-container iframe,  
  2. .responsive-container object,  
  3. .responsive-container embed {
  4.     position: absolute;
  5.     top: 0;
  6.     left: 0;
  7.     width: 100%;
  8.     height: 100%;
  9. }

You get the responsive container for the google map finally. This technique works with any other embed elements also.

Live example: check the example >>

You could be interested to read How to Print Google Maps also.

Share Button

Check Related Posts:

Leave a Reply

  • five × 4 =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now