Multiple directions

HTML

<script src="//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-3.1.2.js?ver=3.1.2"></script>
<div id="map"></div>
<div id="info"></div>

CSS

#map{width:320px;height:200px}
.label{background:rgba(130,130,130,0.8);color:white;padding:3px;z-index:9999}

JavaScript

var map = $('#map');
var func = function () {
    var leg = this.directions.routes[0].legs[0];
    var html = [];
    html.push('<p>')
    html.push('起點: ' + leg.start_address + '<br />');
    html.push('終點: ' + leg.end_address + '<br />');
    html.push('距離: ' + leg.distance.text + '<br />');
    $(html.join('')).appendTo($('#info'));
};

map.tinyMap({
    'center': ['25.050457751876504', '121.54136180877686'],
    'zoom': 13,
    'direction': [
        {
            'from': '台北車站',
            'to': '台北101',
            'event': {
                'directions_changed': {
                    'func': func
                }
            }
        },
        {
            'from': '台北車站',
            'to': '臺北市立建國高級中學',
            'event': {
                'directions_changed': {
                    'func': func
                }
            }
        },
        {
            'from': '台北車站',
            'to': '台北小巨蛋',
            'event': {
                'directions_changed': {
                    'func': func
                }
            }
        }
    ]
});