In usability we trust

UX and all things web

Populating Google Maps with Microformats revisited

A few month ago I posted about a demo where I used content marked up with Microformats to populate a Google map using Javascript. Well, now I’ve improved that demo somewhat.

Please read about my first take in Using microformats to populate Google Map.

The demo is still in Swedish since I originally made it for a lecture here in Sweden about using Microformats. But despite that I think it’s fairly easy for all you non-swedes to follow the code.

Watch the live demo

So what have I done in this new version?

Updated the Google Maps code

In the old demo I used some deprecated Google Maps 1.0 methods. In the new demo these are replaced with Google Maps 2 methods.

GPoint is changed to GLatLng
GMap.centerAndZoom() is changed to GMap2.setCenter()

Switched Javascript Library

I have switched Javascript library from DOMAssistant to jQuery. Lately I’ve been working a lot with jQuery so it seemed like a natural switch.

Added a slider

I wanted to be able to easily filter the result by month using a slider. Since jQuery UI features a nice Slider I went with that.

Adding the slider was fairly easy. I used the default graphics and just tweaked the slider-background a little bit in Photoshop.

To put the slider in place all that is needed is to add a div with id="date_slider" to the HTML-document and the code below:

$('#date_slider').slider({
handle: '.handle',
steps: 3,
min: 5,
max: 8,
startValue: 8,
slide: function(e, ui) {
// Changing the label to the selected monthname
$('#selected_month').html(monthName(ui.value));
},
change: function(e, ui) {
// filtering event list
filterEventList(ui.value);

// filtering markers on map
filterMap(ui.value);
}
});

Scrolling the list

When you click on a marker in the map the appropriate element in the sidebar list is highlighted. When the list is long enough to be scrollable it sometimes means that the highlighted item isn’t visible. I wanted a way to make the list scroll so the item came into view.

The jQuery plugin ScrollTo came to the rescue. It’s a really nice plugin that makes it easy to do just this. The syntax is: $(element).scrollTo(obj);

Where element is the list and obj is the selected item.

The files

If you want to try the demo and check out the files, please use the links below.

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

3 Comments

  1. Despite being new to web programming I got this example to work with my own data.

    Thanks for the example.

  2. Finally completed it with modifications to suite my site and published it.

  3. John C: That’s good to hear! Do you have a link to it? It would be fun to see it!

Leave a Reply to John C Cancel reply

Your email address will not be published.

*