Microformats in Google Maps

Tuesday, July 31, 2007 at 4:28:00 PM

If you have spent any time in certain corners of the web, you will have heard of Microformats: Clever uses of HTML that add machine-readability to everyday web pages while preserving human-readability. Microformats allow tools to make more sense of your web pages, while not changing the visual appearance for visitors to your site one whit.

Today we're happy to announce that we are adding support for the hCard microformat to Google Maps results. Why should you care about some invisible changes to our HTML? By marking up our results with the hCard microformat, your browser can easily recognize the address and contact information in the page, and help you transfer it to an addressbook or phone more easily. Firefox users can install the Operator or Tails extension; IE or Safari users can use one of these bookmarklets.

If you are on a Mac, and want to export a search result to your address book, this is how it looks:

Using Microformats in your Maps API application
You can get the benefits of microformats for your own maps applications if you change your HTML to contain the necessary hcard classes. In this simple example, we've changed the infowindow to contain an hCard formatted address. The code for that is below:

  var html = '<div class="vcard"> <span class="adr">'
             + '<span class="fn n">Googleplex<br />'
             + '<span class="street-address">1300 Amphitheatre Parkway</span><br />'
             + '<span class="locality">Mountain View</span>, ' 
             + '<abbr class="region" title="California">CA</abbr>'
             + '<span class="postal-code">94043</span>'
             + '</span> </div>';
  map.openInfoWindowHtml(map.getCenter(), html);

If you want to learn more, head over to microformats.org.