Embedding Google Maps: iframe to object with XHTML Strict

Sal Baldovinos / August 28, 2009 at 3:11 pm
In Development, Tutorials 6 Comments

Pop Labs recently made the switch from XHTML Transitional to Strict for our client sites. With that came some interesting changes. Most notably is that when you use XHTML Strict, you can no longer use iframes due to them being deprecated. Even more interesting is that you can now use the Object Tag in place of iframes and come out with a validated site. Then came Google Maps. While you can still use the object tag to display an embedded Google Map, IE 6 & 7 will not display the maps. Sadness.

To eliminate this problem, Team Lead Chris Pratt wrote some awesome JavaScript to make it work.

The Code


<object id="map" type="text/html" data="http://maps.google.com/maps?f=q&
source=s_q&hl=en&geocode=&q=Parkwood+Cir+Dr,+Houston,+TX+77036&
sll=37.0625,-95.677068&sspn=49.624204,114.169922&ie=UTF8&z=14&
iwloc=A&ll=29.700281,-95.550928&output=embed" style="width:450px;height:300px;">
</object>

<!--[if lte IE 7]><script type="text/javascript">(function(){var o=document.
getElementById('map');var i=document.createElement('iframe');i.setAttribute
('src',o.getAttribute('data'));i.style.width=o.style.width;i.style.height=o.style.
height;o.parentNode.replaceChild(i,o);})();</script><![endif]-->

What’s Happening?

As you can see from the code above, we’ve replace iframes with the object tag. When you go to Google Maps and get the embed link, you’re given code wrapped in an iframe. What you’ll need from that is the URL or SRC url. Take that code and place it in your object tag’s “data” source url. IE data=”[google's source url]“.

You’ll notice that the object also has an ID of “map”. This is used by the JavaScript. In addition you’ll see some inline styling as well. This is also necessary for the Javascript to read your width & height values. Simple replace the current values with the appropriate values for your site.

Finally you’ll need to place the IE conditional statement after the object tag.

Example

We hope this helps you!

Share on Facebook

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

1016 Comments2009-08-28+21%3A11%3A39Sal+Baldovinos »

On August 29, 2009 @ 3:55 am Jesse Bye said

I noticed that IE 8 has the same problem – the map won’t appear. So I modified the conditional tag to read

and everything works as it should.
On August 31, 2009 @ 4:18 pm Jade Wood said

Good post. I’ll try using this soon.
On September 16, 2009 @ 11:07 am Sal Baldovinos said

@Jesse – Awesome, glad that worked out. It’s important to keep all browsers in mind so, yes IE8 should be added to that conditional statement.

@Jade – Thanks for the feedback! We hope it helps
On September 22, 2009 @ 10:26 am MikeD said

@Jesse: your new conditional tag doesn’t appear because you enclosed it in comments …..

reading the source code of this page, what you did was ….[if lte IE 8]….

I was even a bit more rigorous replacing this by ….[if IE]…. asuming that this code will see still more IE versions of bade hope ….

@Sal: congrats – brilliant job

Kind regards
Mike
On September 22, 2009 @ 10:35 am Sal Baldovinos said

The credit goes to Chris Pratt, our Team Lead. I just put the tutorial together so we all could share Thanks for stopping by!
On October 5, 2009 @ 2:59 am Andreas Tandersten said

Hi.

I can´t make this solution work in Liferay environment for our librarys homepage. No workaround is needed in IE8 for Iframe/object solution, but in IE6 and IE7 it still only show a white blank frame when applying the script.

I believe it has something to do with the fact that liferay environment is built up by small scripts/portlets.

Any sugggestion.

The google map embeded object is in the portlet:”Hur du hittar till biblioteket i Tyresö”