skuare.net

jQueryプラグインのgmaps.jsを利用すると簡単にGoogle Mapを作成できることできます。
またルート案内もできるので、駅から会社が少し離れていた場合の推奨ルートを表示してあげるのもいいかもしれません。
今回はこのルート案内を設定する方法を紹介します。

使用方法 gmaps.jsをダウンロード。
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmaps.js"></script>
上記を記述したら、ルートなどGoogle Mapの設定をしていきます。
<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
div: '#map', //Mapを表示するid名
lat: 35.64607140340655, //中心緯度
lng: 139.71427738666534 //中心経度,
zoom: 18 //ズームレベル
});
$('#start_travel').click(function(e){ //start_travelをクリックしたらルート案内
e.preventDefault();
map.travelRoute({
origin: [35.64731248648989, 139.70908999443054], //出発点の緯度経度
destination: [35.64607140340655, 139.71427738666534], //目標地点の緯度経度
travelMode: 'walking', //モード（walking,driving）
step: function(e){
$('#instructions').append('<li>'+e.instructions+'</li>'); //ルートをテキスト表示
$('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
map.setCenter(e.end_location.lat(), e.end_location.lng());
map.drawPolyline({
path: e.path,
strokeColor: '#131540', //ルートの色
strokeOpacity: 0.6, //ルートの透明度
strokeWeight: 6 //ルート線の太さ
});
});
}
});
});
});
</script>
最後に表示するHTMLを書いていきます。
<a href="#" id="start_travel" >ルートを表示</a>
<div id="map" style="height: 300px;"></div>
<ul id="instructions"></ul>

Queryプラグイン「gmaps.js」でルート案内付きGoogle Mapを作成するサンプル