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