Thursday, December 13th, 2007
Unobtrusively Mapping Microformats with jQuery
Category: Articles, jQuery
, Mapping
, Microformat
Simon puts together jQuery, microformats, and the Google Maps API to grok hCard and show maps of any hCard data that is found, ending up with:
JAVASCRIPT:
-
-
jQuery(function() {
-
// First create a div to host the map
-
'width': '90%',
-
'height': '400px'
-
}).insertBefore('ul.restaurants');
-
-
// Now initialise the map
-
var mapstraction = new Mapstraction('themap','google');
-
mapstraction.addControls({
-
zoom: 'large',
-
map_type: true
-
});
-
-
// Show map centred on Brighton
-
mapstraction.setCenterAndZoom(
-
new LatLonPoint(50.82423734980143, -0.14007568359375),
-
15 // Zoom level appropriate for Brighton city centre
-
);
-
-
// Geocode each hcard and add a marker
-
jQuery('.vcard').each(function() {
-
var hcard = jQuery(this);
-
-
var streetaddress = hcard.find('.street-address').text();
-
var postcode = hcard.find('.postal-code').text();
-
-
var geocoder = new MapstractionGeocoder(function(result) {
-
var marker = new Marker(result.point);
-
marker.setInfoBubble(
-
'<div class="bubble">' + hcard.html() + '</div>'
-
);
-
mapstraction.addMarker(marker);
-
}, 'google');
-
geocoder.geocode({'address': streetaddress + ', ' + postcode});
-
});
-
});
-
You see the finished code at work.
Related Content:
- microformat
A microformat is a type of open source data format built upon existing and widely adopted frameworks like... - microformats
A microformat is a type of open source data format built upon existing and widely adopted frameworks like... - Business data follows where blog feeds lead
An important bit of the business data infrastructure is now being decided in the "blogosphere" - that amorphous cloud of interlinked personal weblogs... - Ozzie: Live Clipboard will let us wire the Web
Ray Ozzie's latest project, Live Clipboard, promises simple sharing of structured data among Web applications and... - Running a query against a UDDI Registry
3.7 rating from 26 votes
Cool. We have been doing this some weeks ago, almost the same as mentioned here. We dubbed our system MapWorks (still in early beta), you can see a demo over here:
http://scoutinginvlaardingen.nl which maps all scouting groups in the dutch city Vlaardingen.
I had this idea for a long time. Simply just to read out the vcard microformatted html from the page, and plot them in a gMap. Very web 2.0.
Simon is the, “master of disaster” – I mean… “master of good code”. It just doesn’t have the same ring to it, does it?