Inspired by an article I’ve read on 24-ways I’ve built a demo-page for using content marked up with microformats to populate a Google Map.

Unfortunately the demo is in Swedish, but I think those of you who doesn’t speak Swedish can easily understand it anyway.

The main concept is to use a list of folksong festivals in Scandinavia, carefully marked up with microformats, as a data source. I then use Javascript to loop through the content and populate the map.

I got the list of festivals from www.nordvisa.org. Thank you Chris!

Watch the demo in action

So what’s the big deal?

The advantage of this is that you can handle all events marked up with microformats the same way. It’s a standardized way of telling what is what. It means that you could for example build a script that automatically collects data from different sources (e.g. different web sites) and then display them all in the same place. If you find a new source to collect data from you just hook it up as well and you’re good to go.

On microformats.org they describe it like this:

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

It’s basically a way to give more meaning to content. If for example you mark up your contact info with the microformat hCard. It can easily be imported to address books and other services.

Marking up the content

To mark up content with microformats you use the attribute: class on an HTML element. If you for example want to mark up your home phone number you can do it like this:

<div class="tel">
	<span class="type">home</span>:
	<span class="value">+1.415.555.1212</span>
</div>

This way not only humans can see that that’s your home phone number but computers can interpret it as well.

In this demo I’ve used the microformat hCalendar to mark up events. To mark up a block of information as an event using the hCard standard you use the class vevent on the container, in this case the list element <li>.

This is how I marked up the title and the dates of an event:

<li class="vevent">
	<h3 class="summary">Vømmelfestivalen</h3>
	<p>
		<abbr class="dtstart" title="2008-05-29">29 Maj</abbr> —
		<abbr class="dtend" title="2008-06-01">31 Maj</abbr>
	</p>
</li>

Note that in this case I use class="dtstart" attribute to tell what kind of information it is, in this case the start date of the event. Then I use the attribute title="2008-05-29" to tell the date in a standardized, machine readable way.

To mark up geographical data there’s a class called geo and there’s also classes to mark up the coordinates: latitude and longitude. I use these classes so that I later on can extract the events position using Javascript.

<p class="geo">
	GEO: <span class="latitude">63.798256</span>,
	<span class="longitude">11.494446</span>
</p>

Are you starting to get a hang of it? Microformats isn’t hard to use. It’s all about using the same HTML that you always use with the difference that you use certain class names to describe the content.

The Javascript

I use the classes in the markup as hooks to extract the data and put it in the map. As an added bonus I can also use the classes to style the visual appearance of the content.

In map.js the script loops through the different events (class="vevent") and look for information about them. It then uses this information to put a marker in the map and to create a info bubble that appears when you click the marker.

Here’s the code to extract the geo data:

Note: I’ve used the Javascript library DOMAssistant to ease the pain of DOM coding. If you don’t recognize the $() notation, you should definitively check it out.

// Getting all elements marked up with the class="vevent"
var events = $('.vevent');

// Loop through all event elements to extract data about each event
for (var i=0; i < events.length; i++) {
	// Extracting the coordinates
	events[i].latitude =  $(events[i]).elmsByClass('latitude')[0].innerHTML;
	events[i].longitude =  $(events[i]).elmsByClass('longitude')[0].innerHTML;
}

And here’s the code for putting a marker into a Google map (some code omitted for clarity of the example):

// Creating a point in Google map
var point = new GPoint(events[i].longitude, events[i].latitude);

// Creating and adding a marker in Google Maps
var marker = new GMarker(point);

// The variable map is the map object.
// It's been created earlier in the code and is not shown in the example
map.addOverlay(marker); 

Of course in the demo I do more than this. I extract more information about the events and then use it to create an info bubble which I attach to the click event of the marker. Please check out the entire Javascript code for this demo by downloading map.js.

If you want to use the code yourself you also need DOMAssistantComplete-2.7.js (or newer) and an API-key for Google maps.

Watch the demo in action

Related resources

• Google Maps api
• Microformats
• DOMAssistant