tinyMap: Legs of directions

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=zh-TW&amp;libraries=geometry"></script>
<script src="http://app.essoduke.org/tinyMap/jquery.tinyMap-2.9.6.min.js?ver=2.9.6.0"></script>
<button type="button" id="show">Show</button>
<div id="info"></div>  
<div id="map" class="map"></div>

CSS

.map{width:100%;height:100vh}
.from{color:#00D}
.to{color: #090}

JavaScript

var map = $('#map'),
    info = $('#info');

map.tinyMap({
    'center': ['25.04380934412532', '121.55998706817627'],
    'zoom': 14,
    'direction': [
        {
            'from': ['25.04151536540612', '121.56354904174805'],
            'to': ['25.04485911668452', '121.56917095184326'],
            'waypoint': [
                ['25.031794640503858', '121.56414985656738']
            ]
        },
        {
            'from': ['25.0383270525352', '121.57045841217041'],
            'to': ['25.035255306871402', '121.56998634338379']
        }
    ]
});


$('#show').on('click', function () {
    // 取得 tinyMap 實例
    var m = map.data('tinyMap');
    // 所有路徑規劃資料
    var dd = m._directions;
    // 第一筆路徑資料
    var dA = dd[0].directions.routes[0].legs;
    // 第二筆路徑資料
    var dB = dd[1].directions.routes[0].legs;
    // 總時間（秒）
    var totalSeconds = 0;
    // 總距離（公尺）
    var totalDistance = 0;
    var m  = '';
    var i  = 0;
    
    for (i = 0; i < dA.length; i += 1) {
        m += '<li>從 <span class="from">' + dA[i].start_address + '</span>' +
             ' 前往 <span class="to">' + dA[i].end_address + '</span>' +
             ' 距離 <span class="distance">' + dA[i].distance.text + '</span>' +
             ' 大約 ' + dA[i].duration.text + '</li>';
        totalSeconds += dA[i].duration.value;
        totalDistance += dA[i].distance.value;
    }
    m = '<ol>' + m + '</ol><p>' +
        '旅程總計 ' + new Number(totalDistance / 1000).toFixed(1) + ' 公里。<br />' +
        '需時 ' + Math.round(totalSeconds / 60) + ' 分鐘。</p>';

    info.html(m);
});