Load the geo formatter

In the head of your document, add references to Google Maps and the Ubiquity loader:

<script src="http://maps.google.com/maps?file=api&v=2&key=Your Google Maps key" type="text/javascript">/**/</script>
<script src="http://ubiquity-rdfa.googlecode.com/svn/tags/0.7.1/ubiquity-loader.js" type="text/javascript">/**/</script>

If you don't already have a Google Maps API key, then it's easy to get one, and will only take a minute. Next, add a reference to the geo formatter itself:

<span rel="libxh:include" href="/formats/geo.html"></span>

Now we're ready to make use of the formatter in our HTML and XHTML pages.

Longitude and latitude

To mark up a location when you already know the longitude and latitude, all you have to do is this:

<span typeof="geo:Point" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
  Latitude: <span property="geo:lat">51.523671</span>
  Longitude: <span property="geo:long">-0.107841</span>
</span>

The result will look like this: Note when you click on the pin, how the inline text inside the geo:Point item is used as the text when you click on the pin. In most cases you'll want to hide the coordinates and show some text instead:

We look forward to seeing you at the
<span typeof="geo:Point" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
  <span property="geo:lat" content="51.523671"></span>
  <span property="geo:long" content="-0.107841"></span>
  webBackplane office
</span>.

which will look like this: You can also add mark-up to the pin:

<span typeof="geo:Point" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" style="display: none;">
  <span property="geo:lat" content="51.523671"></span>
  <span property="geo:long" content="-0.107841"></span>
  The webBackplane team:
  <hr/>
  <div style="width: 220px;">
    <img src="http://farm1.static.flickr.com/23/31166459_1da444b6b1_t.jpg" width="100" alt="Mark Birbeck visits, taken by distobj"  />
    <img src="/files/pictures/picture-5.gif" alt="Alex Sansom" />
    <img src="/files/pictures/picture-4.jpg" alt="Paul Butcher" />
    <img src="/files/pictures/picture-3.png" alt="Phil Booth" />
  </div>
</span>

Note that we've used @style="display: none;" to hide the mark-up so that it doesn't appear inline. However, it will still show up when the user clicks on the pin:

Geo-coding

You can use geo-coding to convert a basic address to a full address using dc:coverage. A geocoding icon will be added to your text, and the full address will be shown as a tooltip on the icon:

Our office at
<p property="dc:coverage" xmlns:dc="http://purl.org/dc/terms/">4 Pear Tree Court, London</p>.

which will look like this: In addition to the geo-coding icon and full address, the process also adds a longitude and latitude value to the object that has the dc:coverage property. This can be used to generate a map in exactly the same way as our earlier examples, simply by adding @typeof="geo:Point":

We look forward to seeing you at the
<span typeof="geo:Point" xmlns:geo="xhttp://www.w3.org/2003/01/geo/wgs84_pos#">
  <span property="dc:coverage" content="4 Pear Tree Court, London, UK" xmlns:dc="http://purl.org/dc/terms/">
    webBackplane office
  </span>
</span>.

Which will look like this: