Microformats to Google Map Links

In a recent project I was working on, I had a chance of trying out Microformats. Getting the hCard in and running was easy, but at the same time, I wanted to provide a mapping functionality that opened to Google Maps. The only caveat I imposed on myself was not to add any extra markup than necessary.

Why do it this way you might ask? Since the project was basically an online directory, it was easier to use Javascript to handle all the Google map address creation since there were literally thousands of addresses in the directory.
Below is a sample of the code I used. The sample below has been modified for one address.

<div class="vcard" id="card">
   <h3 class="fn org">
      <a href="/BMWConcord/business713" title="BMW Concord">BMW Concord</a>
   </h3>
   <address class="adr">
      <span class="street-address">1967 Market St</span>
      <span class="locality">Concord</span>
      <span class="region">CA</span>
      <span class="postal-code">94520</span>
   </address>
   <span class="tel">(866) 463-9269</span>
</div>

With the above XHTML markup, all I had to do is hook it up with some Javascript to get it working.

var map = document.getElementById("map");
map.onclick = function(){
   var card = document.getElementById("card");
   var orgname = card.getElementsByTagName("h3")[0];
   var spans = card.getElementsByTagName("span");
   var street;
   var city;
   var state;
   var zipcode;   for(var j = 0; j < spans.length; j++){
      if(spans[j].className == "street-address"){
         street = spans[j].firstChild.nodeValue;
      }
      else if(spans[j].className == "locality"){
         city = spans[j].firstChild.nodeValue;
      }
      else if(spans[j].className == "region"){
         state = spans[j].firstChild.nodeValue;
      }
      else if(spans[j].className == "postal-code"){
         zipcode = spans[j].firstChild.nodeValue;
      }
   }
   var address = street + " " + city + " " + state +  " " + zipcode;
   var url = "http://maps.google.com/?q=" + address;
   window.open(url);
   return false;
}

Download the sample code here.