Automatically Generated Maps with Microformats
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.
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.