Subscribe to RSS Feed

Elijah Miller

09 Sep 2013

Automatically Generated Maps with Microformats

Got a few addresses and want to show them on a map without writing any javascript? It turns out, there's an incredibly easy way: mark up your addresses as hCards and use the simple-maps javascript library.

Microformats to the Rescue!

Microformats are a simple way to attach meaning to standard HTML tags by using classes. Here is an example I made with the hCard Creator.

<div id="hcard-starbucks" class="vcard">
  <a class="url fn" href="http://starbucks.com">Starbucks</a>
  <div class="adr">
    <span class="street-address">854 Broad Ripple Ave</span><br/>
    <span class="locality">Indianapolis</span>,
    <span class="region">IN</span>,
    <span class="postal-code">46220</span>
    <span class="country-name">USA</span>
  </div>
</div>

Rendered as HTML using default styling, this looks like:

Starbucks
854 Broad Ripple Ave
Indianapolis, IN, 46220 USA

Pretty simple, it usually means adding some classes to data that's already on the page. We can style this however we like, including completely hiding elements with display: none for things that may be obvious (country name?).

To display the map we just use an element with id="map"

<div id="map" style="width: 100%; height: 400px"></div>
Map would be here if you had javascript enabled.

There are two pins because it also picks up my hCard from the site layout.

Automatic Geocoding

You may have noticed I didn't specify longitude or latitude anywhere in the hCard. simple-maps detects and computes geocodes when they're not given.