Directions Service: Narrative Microformat

What is it?

The microformat Narrative type adds <span> tags that have semantic value. This lets you easily style part of the narrative, and includes the adr format found at microformats.org.

For more information on Microformats please see microformats.org.

Class Name	Description
nav-cmd	The top level parent element of the maneuver.
compass-dir	The directional component of the maneuver. (ex: East, West, Northwest)
relative-dir	The turn direction. (ex: Left, Right)
type	The type of maneuver to make. (ex. Turn, Keep Going, Merge)
street-name	Parent element of a collection of street names.
first, second, third	The streets that make up a street-name. (ex. US-222/US-30)
regular	A normal street along the maneuver.
intersecting	A street that intersects the maneuver.
toward-sign	Toward sign on the maneuver. Usually a highway interchange.
exit-sign	The exit sign name on a maneuver.
label	The text of an exit sign.
value	The numerical value of the exit sign.
branch-sign	A branch sign on the maneuver. Usually part of an exit.
note	Extra information about the maneuver.
toll	Messaging to indicate the user on a toll road.
adr	A location. See the hCard specification for the class names that make up a location microformat.

Demo

Sample Request URL

/directions/v1/route?key=YOUR_KEY_HERE&callback=render&narrativeType=microformat&from=Lancaster, PA&to=Philadelphia, PA

Sample Narrative Microformat

<span class="nav-cmd">
  <span class="type">Merge</span> onto 
  <span class="street-name">
    <span class="regular">
      <span class="first">I-76 E</span>
    </span>
  </span> via
  <span class="exit-number">
    <span class="label"> EXIT </span>
    <span class="value">326</span>
  </span> toward 
  <span class="toward-sign">US-202/I-476/PHILADELPHIA/VALLEY FORGE</span>
  <span class="note">
    <span class="toll"> (Portions toll)</span>
  </span>.
</span>

Sample Javascript to Manipulate Narrative

function turnBold() {
    var elements = document.getElementsByClassName('street-name'), i = 0, element;

    for (; i < elements.length; i++) {
        element = elements[i];
        element.style.fontWeight = 'bold';
    }
}