Thursday, December 13th, 2007

Unobtrusively Mapping Microformats with jQuery

Category: Articles, jQuery, Mapping, Microformat

<>p>Simon Willison just doesn’t stop. This time he has added a way that details the technique of unobtrusively mapping microformats with jQuery.

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
< view plain text >
  1. jQuery(function() {
  2.     // First create a div to host the map
  3.     var themap = jQuery('<div id="themap"></div>').css({
  4.         'width': '90%',
  5.         'height': '400px'
  6.     }).insertBefore('ul.restaurants');
  7.  
  8.     // Now initialise the map
  9.     var mapstraction = new Mapstraction('themap','google');
  10.     mapstraction.addControls({
  11.         zoom: 'large',
  12.         map_type: true
  13.     });
  14.  
  15.     // Show map centred on Brighton
  16.     mapstraction.setCenterAndZoom(
  17.         new LatLonPoint(50.82423734980143, -0.14007568359375),
  18.         15 // Zoom level appropriate for Brighton city centre
  19.     );
  20.  
  21.     // Geocode each hcard and add a marker
  22.     jQuery('.vcard').each(function() {
  23.         var hcard = jQuery(this);
  24.    
  25.         var streetaddress = hcard.find('.street-address').text();
  26.         var postcode = hcard.find('.postal-code').text();
  27.    
  28.         var geocoder = new MapstractionGeocoder(function(result) {
  29.             var marker = new Marker(result.point);
  30.             marker.setInfoBubble(
  31.                 '<div class="bubble">' + hcard.html() + '</div>'
  32.             );
  33.             mapstraction.addMarker(marker);
  34.         }, 'google');    
  35.         geocoder.geocode({'address': streetaddress + ', ' + postcode});
  36.     });
  37. });

You see the finished code at work.

Posted by Dion Almaer at 7:01 am
2 Comments

+++--
3.6 rating from 32 votes

2 Comments »

Comments feed TrackBack URI

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.

Comment by 42answers — December 13, 2007

Simon is the, “master of disaster” – I mean… “master of good code”. It just doesn’t have the same ring to it, does it?

Comment by Marc — December 13, 2007

Leave a comment

You must be logged in to post a comment.