In usability we trust

UX and all things web

Using Microformats to populate Google Map

MicroformatsInspired 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 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 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>

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>
		<abbr class="dtstart" title="2008-05-29">29 Maj</abbr> —
		<abbr class="dtend" title="2008-06-01">31 Maj</abbr>

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>

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

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


  1. Your end date mark-up:

    <abbr class=”dtend” title=”2008-05-31?>31 Maj</abbr>

    is incorrect. End dates are exclusive in hcalendar, and that should be, blieve it or not:

    <abbr class=”dtend” title=”2008-06-01?>31 Maj</abbr>

    which is clearly an even greater abuse of the ABBR element than the start date markup. For more on the latter topic, see haccessibility.

  2. @Andy: Thanks for the information and for the link! I didn’t know that, though I have vaguely reflected over the use of <abbr> to mark up microformats. Now, after reading haccessibility, I’ve come to the insight that besides the unfortunate effect to people using screen readers having to listen to a really long number, there’s very little point in providing a “machine adapted” explanation to the “human adapted” display of the dates. Therefor it should be better to use for example a <span> to mark up dates.

    Regarding the use of dtend in hEvent I think you are wrong. At least from what I can make out of it on it seems perfectly valid.

  3. @Andy: I’m sorry I didn’t understand you at first but now I see what you mean. The end date should, for machines, be one day after what we humans consider the actual end day. So the example is in fact wrong. As they say on the microformat wiki:

    Note 5: The difference between the DTEND ISO8601 date (2005-10-08) and the human readable date (7) is NOT a mistake. DTEND is exclusive (, meaning, that the event ends just before the DTEND. Thus for events which start on one day and end on another day, the DTEND date must be specified as the day after the day that a human would say is the last day of the event.

    Sorry about that mistake. I will update the example with the correct dates. Thanks Andy.

  4. A great example which inspired me to try and do the same.

    Is it possible to see the php page?

    I’m fairly new to Web development and have copied your example with my own data.

    My version works fine in Firefox and Chrome but fails in I.E 8.
    The markers do not display/are not visible.

    Comparing my code to yours would be very helpful.

  5. As Gabriel pointed out to me there an updated version of this article:

    I managed to get this working despite being new to Web development.

  6. Amazing website. Going to need a bit of time to absorb the story!

  7. Hej.

    Vill du uppdatera sidan med med Loses Visfestival i Bollnäs så blir jag glad.


    Kurt Öberg

Leave a Reply to Andy Mabbett Cancel reply

Your email address will not be published.