Embedding Google Maps? Simple Code Tweak to Avoid Overlaps

Quick Tip Helps Keep Embedded iFrames From Spilling Over!

Google Maps and YouTube, are just two of the commonly embedded elements people add to their blogs and websites using iframes. When you first set up iframe content, it may look very nice, but should you narrow the column in which they are embedded, they can spill over, creating a mess of your blog or page. This problem can be easily avoided with this simple tweak.

What Map Overlap Looks Like

The screen shot below shows one of my previous problems, before I learned this trick-not a pretty site eh?

Google Map Before Tweaking

Google Map After Tweaking

What Causes This Google Map Overlap Problem ?

Where this Google Map overlap problem stems from, is the choices people are given for embedding Google maps, YouTubes, Flickr pictures,and other such properties. I had chosen to embed a map that was 435 wide, as you can see in the code below:
Here is the code I had embedded:

  <iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="http://maps.google.ca/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=213602822130861661201.00049ff85311300ba4a5b&amp;ll=44.370987,-78.54126&amp;spn=0.171791,0.291824&amp;z=11&amp;output=embed" width="425"></iframe>
<small>View <a href="http://maps.google.ca/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=213602822130861661201.00049ff85311300ba4a5b&amp;ll=44.370987,-78.54126&amp;spn=0.171791,0.291824&amp;z=11&amp;source=embed" style="color: blue; text-align: left;">Omemee Area Church Services</a> in a larger map</small>

Therefore, when I made my column size 300, the iframe spilled over into the adjacent column.

Google Map Overlap Solution

There is a simple trick which can be used to remove this overlap- just change the width value to a percentage of the column width-as shown below:
  <iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="http://maps.google.ca/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=213602822130861661201.00049ff85311300ba4a5b&amp;ll=44.370987,-78.54126&amp;spn=0.171791,0.291824&amp;z=11&amp;output=embed" width="100%"></iframe>
<small>View <a href="http://maps.google.ca/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=213602822130861661201.00049ff85311300ba4a5b&amp;ll=44.370987,-78.54126&amp;spn=0.171791,0.291824&amp;z=11&amp;source=embed" style="color: blue; text-align: left;">Omemee Area Church Services</a> in a larger map</small>

An Ounce of Prevention

By using the value of 100%, rather than a number value, I’m preventing my Google Maps from overlapping into other columns, when I change the size of my columns. You can choose whichever percentage suits your needs,for example if you want the map to be only half the size of the column,use 50% rather than 100%.

Caveat:

While this method may work for Google maps, if you use it when embedding pictures you may find Aunt Bertha’s bottom changes to comical proportions when you change your column width. There must be a tweak to this code out there to keep the picture proportions, If you find a tweak that will maintain picture proportions and allow them to automatically adjust with column width, please share!

It’s Your Turn. Please drop me a comment. Did this work for you? How are you using iframes? Hopefully, you will find this tweak helpful. Did you find what you were looking for today? If not, please let me know, I may have the answer tucked in the back office waiting for some tweaking!
Suzanne