directions-examples: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
mNo edit summary
 
Line 7: Line 7:
Get examples from Google Maps, MSN Maps, Yahoo Maps, and note implicit schemas.
Get examples from Google Maps, MSN Maps, Yahoo Maps, and note implicit schemas.


Google Maps
<pre>
Start address: 50 California St
San Francisco, CA 94111
End address: 10 Market St
San Francisco, CA 94111
Distance: 0.2 mi (about 24 secs)
Reverse directions
1. 1. Head east from California St - go 177 ft
2. 2. Turn right at Drumm St - go 149 ft
3. 3. Turn left at Market St - go 0.1 mi
</pre>
source (via firefox's dom inspector)
<pre>
  <TABLE class="summary">
    <TBODY>
      <TR onclick="openInfoWindow('start')" class="milestone">
        <TD class="name link">
          <A onclick="this.blur()" href="javascript:void(0)">
Start address          </A>
:        </TD>
        <TD class="value" id="panel_start">
50 California St          <BR/>
San Francisco, CA 94111          <BR/>
        </TD>
      </TR>
      <TR onclick="openInfoWindow('end')" class="milestone">
        <TD class="name">
          <A onclick="this.blur()" href="javascript:void(0)">
End address          </A>
:        </TD>
        <TD class="value" id="panel_end">
10 Market St          <BR/>
San Francisco, CA 94111          <BR/>
        </TD>
      </TR>
      <TR>
        <TD class="name">
Distance:        </TD>
        <TD class="value">
0.2&nbsp;mi&nbsp;(about&nbsp;24 secs)        </TD>
      </TR>
    </TBODY>
  </TABLE>
  <DIV class="reverse">
    <A onclick="return loadUrl(this.href)" href="/maps?f=d&amp;hl=en&amp;sll=37.79449,-122.395015&amp;sspn=0.048969,0.081711&amp;saddr=10+market+st,+san+francisco&amp;daddr=50+california+st,+san+francisco">
Reverse directions    </A>
  </DIV>
  <DIV class="printspacer noscreen">
&nbsp;  </DIV>
  <TABLE class="steps">
    <TBODY>
      <TR onclick="showPolylineBlowup('d', 0)">
        <TD class="num noprint">
          <A href="javascript:void(0)">
1          </A>
.        </TD>
        <TD class="num noscreen">
1.        </TD>
        <TD id="panel_0" class="desc">
Head          <B>
east          </B>
from          <B>
California St          </B>
- go&nbsp;          <B>
177&nbsp;ft          </B>
        </TD>
      </TR>
      <TR onclick="showPolylineBlowup('d', 2)">
        <TD class="num noprint">
          <A href="javascript:void(0)">
2          </A>
.        </TD>
        <TD class="num noscreen">
2.        </TD>
        <TD id="panel_2" class="desc">
Turn          <B>
right          </B>
at          <B>
Drumm St          </B>
- go&nbsp;          <B>
149&nbsp;ft          </B>
        </TD>
      </TR>
      <TR onclick="showPolylineBlowup('d', 4)">
        <TD class="num noprint">
          <A href="javascript:void(0)">
3          </A>
.        </TD>
        <TD class="num noscreen">
3.        </TD>
        <TD id="panel_4" class="desc">
Turn          <B>
left          </B>
at          <B>
Market St          </B>
- go&nbsp;          <B>
0.1&nbsp;mi          </B>
        </TD>
      </TR>
    </TBODY>
  </TABLE>
  <DIV class="legal">
These directions are for planning purposes only. You may find that construction projects, traffic, or other events may cause road conditions to differ from the map results.  </DIV>
  <DIV class="legal">
Map data &copy;2005 NAVTEQ&trade;, Tele Atlas  </DIV>
</DIV>
</pre>


== related discussion ==
== related discussion ==


* [http://radar.oreilly.com/archives/2006/03/directions_microformat_leading.html Tim O'Reilly blog post: Directions Microformat -> Google for directions?]
* [http://radar.oreilly.com/archives/2006/03/directions_microformat_leading.html Tim O'Reilly blog post: Directions Microformat -> Google for directions?]

Revision as of 09:28, 27 March 2006

directions examples

Per the microformats process, the first thing to do in the investigation/creation of a new microformat is to research existing examples of directions published on the Web.

examples

Get examples from Google Maps, MSN Maps, Yahoo Maps, and note implicit schemas.


Google Maps


Start address:	50 California St
San Francisco, CA 94111
End address:	10 Market St
San Francisco, CA 94111
Distance:	0.2 mi (about 24 secs)
Reverse directions
 
1.	1.	Head east from California St - go 177 ft
2.	2.	Turn right at Drumm St - go 149 ft
3.	3.	Turn left at Market St - go 0.1 mi


source (via firefox's dom inspector)

  <TABLE class="summary">
    <TBODY>
      <TR onclick="openInfoWindow('start')" class="milestone">
        <TD class="name link">
          <A onclick="this.blur()" href="javascript:void(0)">
Start address          </A>
:        </TD>
        <TD class="value" id="panel_start">
50 California St          <BR/>
San Francisco, CA 94111          <BR/>
        </TD>
      </TR>
      <TR onclick="openInfoWindow('end')" class="milestone">
        <TD class="name">
          <A onclick="this.blur()" href="javascript:void(0)">
End address          </A>
:        </TD>
        <TD class="value" id="panel_end">
10 Market St          <BR/>
San Francisco, CA 94111          <BR/>
        </TD>
      </TR>
      <TR>
        <TD class="name">
Distance:        </TD>
        <TD class="value">
0.2 mi (about 24 secs)        </TD>
      </TR>
    </TBODY>
  </TABLE>
  <DIV class="reverse">
    <A onclick="return loadUrl(this.href)" href="/maps?f=d&hl=en&sll=37.79449,-122.395015&sspn=0.048969,0.081711&saddr=10+market+st,+san+francisco&daddr=50+california+st,+san+francisco">
Reverse directions    </A>
  </DIV>
  <DIV class="printspacer noscreen">
   </DIV>
  <TABLE class="steps">
    <TBODY>
      <TR onclick="showPolylineBlowup('d', 0)">
        <TD class="num noprint">
          <A href="javascript:void(0)">
1          </A>
.        </TD>
        <TD class="num noscreen">
1.        </TD>
        <TD id="panel_0" class="desc">
Head           <B>
east          </B>
 from           <B>
California St          </B>
 - go           <B>
177 ft          </B>
        </TD>
      </TR>
      <TR onclick="showPolylineBlowup('d', 2)">
        <TD class="num noprint">
          <A href="javascript:void(0)">
2          </A>
.        </TD>
        <TD class="num noscreen">
2.        </TD>
        <TD id="panel_2" class="desc">
Turn           <B>
right          </B>
 at           <B>
Drumm St          </B>
 - go           <B>
149 ft          </B>
        </TD>
      </TR>
      <TR onclick="showPolylineBlowup('d', 4)">
        <TD class="num noprint">
          <A href="javascript:void(0)">
3          </A>
.        </TD>
        <TD class="num noscreen">
3.        </TD>
        <TD id="panel_4" class="desc">
Turn           <B>
left          </B>
 at           <B>
Market St          </B>
 - go           <B>
0.1 mi          </B>
        </TD>
      </TR>
    </TBODY>
  </TABLE>
  <DIV class="legal">
These directions are for planning purposes only. You may find that construction projects, traffic, or other events may cause road conditions to differ from the map results.  </DIV>
  <DIV class="legal">
Map data ©2005 NAVTEQ™, Tele Atlas  </DIV>
</DIV>

related discussion