はじめに

店舗紹介などでよくありそうな、交通機関からの経路表示をした地図を表示しようと思います。
単純な画像表示であれば経路地図APIで表示できます。
グリグリ動く地図ならGoogleMapでもできますが、経路となると直線しか引けない上に経由地の個数が20個くらいまでと限られていて使いにくいです。
Yahoo!のJavaScriptマップAPIのプラグインで出来るようなので試してみます。

作ってみる

とりあえず地図表示

まずは単純な地図を表示してみる。
[APP_ID]はYahooでアプリケーションIDを発行したものを記入してください。

<html>
<body>
<div id="map" style="width:500px; height:500px;"></div>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=[APP_ID]"></script>
<script type="text/javascript">
window.onload = function() {
    var map = new Y.Map("map",{"configure":{"scrollWheelZoom":true}});
    map.addControl(new Y.LayerSetControl());
    map.addControl(new Y.SliderZoomControlHorizontal());
    map.addControl(new Y.CenterMarkControl());

    //経路探索プラグインを生成します。
    var plugin = new Y.RouteSearchPlugin();
    //Mapオブジェクトにプラグインを追加します。
    map.addPlugin(plugin);
    //地図を描画します。
    map.drawMap(new Y.LatLng(35.662484, 139.734222), 15 , Y.LayerSetId.NORMAL);
}
</script>
</body>
</html>

六本木ヒルズが中心にきた地図が表示されたかと思います。
地図を右クリックするとメニューが出て、出発地・到着地・経由地などが設定できるかと思います。

初期地点を追記

今回のメインである、地図表示初期に経路を表示するようにしてみます。
RouteSearchPluginのコンストラクタの引数に地点情報を与えるとできるようです。
参考：公式 - YOLP(地図):Pluginクラス

    var configs = {
        "latlngs": [
            new Y.LatLng(35.68156404067264,139.76721008431142),  //東京駅
            new Y.LatLng(35.6657214,139.7310058),  //東京ミッドタウン
            new Y.LatLng(35.69073464614311,139.6998272943479)   //新宿駅
        ]
    };
    var plugin = new Y.RouteSearchPlugin(configs);

完成版

<html>
<body>
<div id="map" style="width:500px; height:500px;"></div>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=[APP_ID]"></script>
<script type="text/javascript">
window.onload = function() {
    var map = new Y.Map("map",{"configure":{"scrollWheelZoom":true}});
    map.addControl(new Y.LayerSetControl());
    map.addControl(new Y.SliderZoomControlHorizontal());
    map.addControl(new Y.CenterMarkControl());
    var configs = {
        "latlngs": [
            new Y.LatLng(35.68156404067264,139.76721008431142),  //東京駅
            new Y.LatLng(35.6657214,139.7310058),  //東京ミッドタウン
            new Y.LatLng(35.69073464614311,139.6998272943479)   //新宿駅
        ]
    };

    //経路探索プラグインを生成します。
    var plugin = new Y.RouteSearchPlugin(configs);
    //地図を描画します。
    map.drawMap(new Y.LatLng(35.662484, 139.734222), 15 , Y.LayerSetId.NORMAL);
    //Mapオブジェクトにプラグインを追加します。(drawMapの後に記載すべし)
    map.addPlugin(plugin);
}
</script>
</body>
</html>

追記
tofuyaさんご指摘通りに修正しました。

Yahoo! JavaScriptマップAPIで経路検索プラグインを使い、初期表示で経路を表示する

はじめに

作ってみる

とりあえず地図表示

初期地点を追記

完成版