3
Building this Blog Site – Part 2
Filed Under This Site | No Comments Yet | Page Tools
In an earlier post I talked about getting this site up and running, then setting up a plugin to get the Gallery2 to WP integration working.
The next tasks were to get the Google Maps and YouTube plugins working, which is the topic of this post.
Google Maps Integration
One of the features I like when reading about others’ travels is having a map to follow the journey. When thinking about this blog I was hoping to be able to include some form of map to show the route taken and some points of interest along the way. Using Google Maps seemed the obvious choice.
KML files and XML Google Maps plugin
Looking around at what was available, it seemed that using KML files (Keyhole Markup Language, an XML format) seemed best as it allowed specification of different types of things, such as points and paths on maps and could be used in Google Maps and Google Earth. It seemed to be just what I needed, so I started looking for sample files and a plugin, thinking that once I have proved the concept on my blog, I could just use Google Maps to give me the Long/Lat/Elev values for my own KML files.
I found the XML Google Maps plugin that takes KML files and produces an inline Google Map and installed it. But I could not get it to work on my site. I tried the GPX file from the plugin author and it worked fine, but any KML file I tried (such as the one from Wikipedia and other samples I found) would not display. I’d get a grey box with the Google controls over it. I suspect something was giving me grief in the XML code, but couldn’t figure it out.
Other Plugins for Google Integration
I investigated another Google Maps plugin, the Inline Google Maps plugin. It seemed to allow the specification of a simple centre point on a Google map and then you could code a definition list to highlight other features. Again this looked like it would do the trick.
But I hit two problems. First the display was inconsistent with my style sheet. When using the vanilla theme I can see a series of DIV statements with unique style settings in Firebug. When I use my theme, it’s just a plain A link; the extra style settings don’t seem to be generated.
The other problem was the same as with the XML Google Maps plugin, even with the working theme, the map portion is just grey. I don’t know what the problem is, but it looks to be the same problem as before.
So I gave up on using plugins. I found a better way.
Creating maps completely in Google Maps and linking
If you register for an account with Google, which you have to do to get the API key for the plugins, then you can create and save your own maps under the “My Maps” tab. This function lets you mark a map with placemarks, lines and shapes.
Once you’ve marked up your map, you can just select the “Link to the Page” link and the drop-down shows some HTML code under the title “Paste HTML to embed in website”. just copy and paste this into the blog entry.
You can also use the link to “Customize and preview embedded map” to tweak the view and then copy the modified text in. For example, I changed the width to 510 pixes as shown below.
It is giving me one challenge though. Once I embed the code in, I can no-longer edit the post in the WP editor. When I enter the editor I can see the entry flash up quickly in the “Visual” editor, and then the entire text area is blanked and cannot be edited. It seems that IFRAMEs in the post conflict with the WYSIWYG editor. Once disabled for the user, all is fine. Apparently it’s fixed in WP 2.5.
Another thing I’ve found is that you must centre the Google Map first (double click on a point in the middle of the map) before you save it. If you don’t you may find your map centred on the US. Also I had to tweak the altitude. Some of my maps were coming up with a z (altitude) of 2 whic was showing all of Australia and much of the ocean around it. I ended up using z=7 or z=8 for the images.
YouTube Integration
As with the Gallery and Google Maps integration, I started searching around for plugins that would give me easy and seamless YouTube integration. My requirements for this were fairly simple, I wanted to be able to embed YouTube videos in posts, with a minimum of fuss.
I chose four plugins to investigate, the three most downloaded with the “youtube” tag, and another that looked useful:
When I had a look at the plugin details for wordTube, I found it was all about making your blog into your own youtube-like site. Not what I was after.
So I downloaded the other three. I played with Vipers Video Quicktags, but could not get the extra edit functions to appear in the edit menu, so it was discarded.
Finally I had a look at the last two; Smart YouTube and EasyTube. These use the same approach; a unique link layout to allow the plugin code to identify the YouTube link and display the video inline. There are a few key differences between the two:
- Marking the YouTube link. With EasyTube you specify left square bracket, “youtube:”, the link and right square bracket (like
- Setting image size. EasyTube allows you to use on of the default sizes (such as 425×355) through global options, or specify the custom sizes as arguments in the square brackets. I found that if you use the global options, you ended up with a square space (i.e. lots of whitespace before and after). With Smart YouTube you specify global options to increase the size and they apply to all videos.
- Borders. EasyTube allows fat borders around the video with a set of pre-canned colours, or none at all. Smart YouTube has none.
- CSS Support. Both use a class specification in their object tags (“youtube” for Smart YouTube, “embed” for EasyTube) so you could setup video-specific formatting.
Other than that, they produce the same look for video’s inline in posts. They each have other differences that I’m not fussed about. EasyTube supports both YouTube and Google.
So which one? I think Smart YouTube wins out for me. I’d be happy with either, but it seems to be a bit simpler again. I can set the size that suits my template in one place and if I change the template, changing all videos only requires a single global option change.
How did it turn out? Have a look at Little wing – a few different versions that showcases a few different versions of the Jimmy Hendrix song.
