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

Virgin CEO Richard Branson talks about the importance of a good PR person to make sure people know about your business. Click on the “Marketing Tab” to view his interview with Seth Godin.

Share on Facebook

A lot of people find selling to be a difficult that. However, selling is something we have to do everyday daily routine whether you are a designer, developer or run a non-profit. This is a presentation I did at the Netsquared Houston meeting recently to help people who don’t usually have to sell learn some of the key concepts.

Share on Facebook