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:
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>
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.