test.html

<html>
  <head>
    <script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Fmjtd%7Cluur20uy2g%2C2g%3Do5-9aya1w"></script>

    <script type="text/javascript">

      /*An example of using the MQA.EventUtil to hook into the window load event and execute defined function
      passed in as the last parameter. You could alternatively create a plain function here and have it
      executed whenever you like (e.g. <body onload="yourfunction">).*/

      MQA.EventUtil.observe(window, 'load', function() {

        /*Create an object for options*/
        var options={
          elt:document.getElementById('map'),        /*ID of element on the page where you want the map added*/
          zoom:13,                                   /*initial zoom level of map*/
          latLng:{lat:40.735383, lng:-73.984655},    /*center of map in latitude/longitude*/
          mtype:'osm'                                /*map type (osm)*/
        };

        /*Construct an instance of MQA.TileMap with the options object*/
        window.map = new MQA.TileMap(options);

        MQA.withModule('directions', function() {
          map.addRoute([
            {latLng: {lat:40.735383, lng:-73.984655}},
            {latLng: {lat:40.765416, lng:-73.985386}}],

            /*Add options.*/
            {ribbonOptions:{draggable:true}},

            /*Add the callback function to the route call.*/
            displayNarrative
          );
        });
      });

      /*Example function inspecting the route data and generating a narrative for display.*/
      function displayNarrative(data){
        if(data.route){
          var legs = data.route.legs, html = '', i = 0, j = 0, trek, maneuver;
          html += '<table><tbody>';

          for (; i < legs.length; i++) {
            for (j = 0; j < legs[i].maneuvers.length; j++) {
              maneuver = legs[i].maneuvers[j];
              html += '<tr>';
              html += '<td>';

              if (maneuver.iconUrl) {
                html += '<img src="' + maneuver.iconUrl + '">  ';
              }

              for (k = 0; k < maneuver.signs.length; k++) {
                var sign = maneuver.signs[k];
                if (sign && sign.url) {
                  html += '<img src="' + sign.url + '">  ';
                }
              }
              html += '</td><td>' + maneuver.narrative + '</td>';
              html += '</tr>';
            }
          }
          html += '</tbody></table>';
          document.getElementById('narrative').innerHTML = html;
        }
      }

    </script>
  </head>

  <body>
    <div id='map' style='width:250px; height:280px;'></div>
    <div id="narrative" style="width:250px;"></div>
  </body>
</html>
			