As mentioned in the past, we’re very much in favour of writing valid code that meets the W3C standards when designing websites. I feel strongly that it’s the best practice, encouraging good coding and making it easier to find errors and cross-browser problems.
Today I had planned to write a post regarding Google’s announcement of their new embed feature that has been added to Google Maps. This new feature makes it about as easy to drop a Google map into your web page as it is embedding a You Tube video.
However, as I got to the end of the post (where I was going to include a nice satellite view of our home town, Ballinamore) I encountered some problems with this new feature.
- The Google solution is to use an iframe, which is a deprecated element and therefore not defined by the XHTML specification.
- The source URL for this iframe is littered with ampersands, which instantly break validation as they are listed as “unencoded entities”.
So, instead of finishing the post, I went off doing some research and looking for a solution which would work across all browsers. I’ll get back to the original post when I’m happy I’ve come up with something with a lean, semantic coding solution.
Replacing the iframe
Just use the <object> element. No problems at all, unless of course you are using Internet Explorer. Unfortunately IE has some problems using the object element, but an evening of research and searching has left me with a more in-depth understanding of the object element.
Aleksandar Vacić found a solution with allows you to use the object element through use of conditional comments and a classid for text/html. I’ve had some problems using this solution to get the Google Maps embed working in IE, but I’m sure a solution isn’t far away. You can view my test page here and if you have any suggestions, let me know.
Solving Unecoded Entities in URL’s
I had often wondered about this but never researched it. How do you solve the problem of a URL that includes ampersands? It’s actually remarkably simple, but not a question that is clearly answered by the sprawl of documentation on the W3C website.
Sample URL: http://www.domain.com/index.php?query=test&type=test&etc=test
As strange as it looks, there is no problem just encoding these ampersands and it doesn’t affect the workability of the URL, so the above URL would look like this:
Correct URL: http://www.domain.com/index.php?query=test&type=test&etc=test
So, where’s the map?
If life were only that simple. As we have converted Pixelapes to run on Word Press, there are some interesting challenges to overcome now. Word Press makes it incredibly easy to write all the articles and posts that you could want, and at the same time it manages to ensure that valid code is being generated at all times.
This however causes problems in slightly more complicated situations like this where you really want to be able to specify exactly the code you want to use with no fear of automated “correction” of <div> elements or additional <p> elements being added to your code output.
So, the intention is to write a little plug-in for Word Press which will enable users to just cut and paste a Google Maps link whilst posting and not have to worry about breaking validation or having the map not display correctly in IE. Stay tuned for updates on my progress!
References
Whilst I was looking into this, I came some excellent resources and information. I thought it would be a good idea to document them all here:
- Cross Browser Object Element tests for strict doctypes:
http://joliclic.free.fr/html/object-tag/en/index.php
http://joliclic.free.fr/html/object-tag/en/object-xhtml-test-suite.php - Using Object in Internet Explorer to embed a HTML page
http://www.aplus.co.yu/web-dev/insert-html-page-into-another-html-page/ - Ampersands and Validation from Roger Johansson
http://www.456bereastreet.com/archive/200406/ampersands_and_validation/
8:23 pm
August 24th, 2007
I wish they hadn’t deprecated the iframe. It was a friend in need.
12:40 am
August 25th, 2007
Well, in theory the use of object should work out much better, if only IE supported it correctly.
Also, that being said, I think iframe had it’s own share of problems! I’ve never been much of a fan of them, especially websites that have load all their content into iframes, making linking to pages difficult.
For most cases I would use a server side include to drop content into a div which had a set width and height and had overflow set to auto. Unfortunately that won’t work for me in this case.
What kind of uses did you make of the iframe element?
3:54 pm
August 27th, 2007
I imagine Google’s thinking in offering an embeddable iframe is to offer the easiest integration method with web services like wordpress, facebook, or myspace, where javascript is not permitted. The lack of an embeddable object is obviously included to maintain IE compatibility.
Of course this doesn’t stop Google from offering embeddable javascript for those who are able to.
Anyway, I found a tutorial that outlines embedding webpages using an object tag, it includes a solution for IE. You can check it out here
11:54 pm
August 27th, 2007
For example:
http://www.photopol.com/colaiste/fcolaiste.html
http://www.photopol.com/james_st/certs/certs.html
12:18 pm
September 6th, 2007
Hi Polo
I think your situation can easily be solved by HTML and CSS.
If you were to use something like the following in your html:
<div id="frame">
<p>Put content here</p>
</div>
and then in your CSS do something like:
#frame {
display: block;
width: 400px;
height: 400px;
overflow: auto;
}
That might solve your iframe needs altogether.
12:43 am
September 7th, 2007
Thanks Alex,
But how do I then get a href (for example to a jpg or html document) to display its output in the division.
With the frame or iframe I simply give it a name and specify that name as the target for the href output.
If I now try using target= , it just opens a new tab rather than directing the output to the named division.
Do I not now need a whack of Javascript as well.
That’s why I figured the frame/iframe was great for dummies like me.
2:49 am
September 11th, 2007
Wow, I desperately need this embed feature from Google Maps, but I’m also required to be valid. Any help is appreciated, links to this being discussed anywhere else, or a solution?
9:01 am
September 11th, 2007
@Polo: I see what you’re looking for now. I’ll have a play around with that and see what I can come up with.
@motherduce: I am assuming you are using Word Press, is that right? I haven’t gotten round to sorting out a Word Press plugin for this, but I’ll post up the valid code in a little while. There are problems with using it in Word Press due to the TinyMCE HTML editor.
More to follow!
2:35 pm
September 11th, 2007
@polo: Hi Polo, I have the valid code to get the object element working for you. This way you don’t have to use the iframe at all.
I’ve tested this on Windows XP IE6, IE7, Firefox 2, Safari 3.0.3, Opera 9.23.
I’m still having some trouble getting Google Maps to work right, but for your needs this should be fine, and all links will open in the object itself.
<h2>Embedding Pixelapes Website</h2>
<!--[if IE]>
<object width="400" height="400" classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="http://www.pixelapes.com">
<p>There is a problem and your site isn't displaying.</p>
</object>
<![endif]-->
<!--[if !IE]> <-->
<object width="400" height="400" type="text/html" data="http://www.pixelapes.com">
<p>There is a problem and your site isn't displaying.</p>
</object>
<!--> <![endif]-->
3:09 pm
September 11th, 2007
@motherduce: I have a short term solution that allows your site to pass validation and embed a google map.
I can’t seem to work out why the method used above, which allows a HTML page to be embedded in all browsers doesn’t work when you’re using a Google Map link.. some more testing required.
However, in the meantime you can just take the above method and pass the correct valid XHTML to all other browsers and just give an iframe to IE. The page should still validate too.
<h2>Embedding Google Maps Link</h2><!--[if IE]>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&z=4&om=1&ll=37.0625,-95.677068&output=embed&s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw"></iframe><br /><small><a href="http://maps.google.com/?ie=UTF8&z=4&om=1&ll=37.0625,-95.677068&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
<![endif]-->
<!--[if !IE]> <-->
<object width="400" height="400" type="text/html" data="http://maps.google.com/maps/ms?f=q&hl=en&geocode=&ie=UTF8&msa=0&msid=115921262329126311801.00043845dd4cecdcc712f&ll=54.055761,-7.798233&spn=0.136838,0.282555&t=h&om=1&output=embed&s=AARTsJqKXWnqSj9gtnt9hZyYZKZ0ILngcg">
<p>There is a problem and your map isn't displaying.</p>
</object>
<!--> <![endif]-->
3:28 pm
September 11th, 2007
ps. With regard to the valid google maps embed method, if you’re doing this for Word Press you might run into some fun and games with Tiny MCE automatically formatting or removing some elements.
This is a hell of a confusing issue. I’ve tried a few fixes, but I haven’t come up with anything that I’m truly happy with, mainly because I like the auto formatting most of the time. It’s only when I’m trying to do the occasional strange thing that it becomes a pain.
5:12 pm
September 11th, 2007
Thank you Alex.
I’m not familiar with using objects but what you have given me works beautifully. I can have it preloaded or give it a name and then direct a href to display output in it. Nice one.
I will now study up on objects. As you will have seen from my site all the stuff is quite primitive and not all kosher. But as with three chords on the guitar, I am only learning what I need as I need it.
I have just looked at the heading of this thread, and should really apologise. I am not tweaking Google maps, just doing ordinary html pages. At least for now.
I will have an interest in Google maps soon as I am doing a family history project (own family and out of interest) and I do want to have some system of an underlying map that pops up information when you hover over spots frequented by the ancestors. This would be both on a national scale and also for Dublin city. So far I have found connections in 13 of the 26 counties, but not yet Leitrim.
Thanks for your time and patience. I will stay tuned to the site though it is a bit out of my league in general.
Beir bua
Pól
8:51 pm
September 11th, 2007
@Alex
I think I may have been a bit premature in what I said above. I am using Firefox 2 and had only checked the code out in this. When I tried IE7 I was back to square one.
What I am trying to do is use the object/iframe as a target for the output of a href, so that people can click on a variety of hot links and the result will show up in one and the same “window” (iframe/object).
I don’t know why IE insists on using its own particular coding. And some other products actually (or at least used to) rely on IE scripting modules to present their results or interact with the user. It happened to me with McAfee. When I uninstalled IE, McAfee couldn’t talk to me.
Can anyone beat sense into these people?
Meanwhile I’ll have to stay with the iframe for pages such as http://www.photopol.com/certs/certs.html and hope that the browsers continue to support it until we can deprecate Bill Gates himself.
8:52 pm
September 11th, 2007
Sorry, site page should have read:
http://www.photopol.com/james_st/certs/certs.html
12:23 am
September 12th, 2007
[...] Objects, Ampersands and Validation (tags: webdesign validation standards) [...]
11:13 pm
January 3rd, 2008
I have now finally got round to using Google Maps in my family history project and it is working out very well. I am now passing info such as latitude and longitude to the map function from the page url. This is clearly very useful as it saves me creating multiple map files.
However when I pass a zoom variable (usually 13) it does not work in the function though it appears (from alert) to have been correctly passed to the variable. If, however, I set the variable inside the javascript it works in the function. I have racked my brains to figure out the difference and why I can’t pass the zoom variable from the url.
The function is:
map.setCenter(new GLatLng(polat, polong), cation);
The url tail is:
?=53.343333=-6.28889=13=Cathal
The regular expression is:
re=/.\=(\S+)\=(\S+)\=(\d+)\=(\S+)/
and alerts show me that the parameters are correctly picked up.
Thanks for earlier help. Any ideas on this one?
11:14 am
January 4th, 2008
Hope you haven’t put in any time on the above. I had a Eureka moment and the scheme is now working perfectly.
I reasoned that while the lat and long variables can be positive, negative, decimal, the zoom on can only be a one or two digit integer and that this is presumably what the function expects. I then figured that, as you don’t have to declare variables in Javascript, the supposedly two digit integer might have had a wider definition, so I simply added the expression:
polmgn=Math.abs(polmgn);
and bingo.
I must be getting the hang of this.
Thanks again for your indulgence.
8:02 am
August 11th, 2010
But how do I then get a href (for example to a jpg or html document) to display its output in the division.
http://www.leadugg.com
With the frame or iframe I simply give it a name and specify that name as the target for the href output.