道案内サービスを利用する(途中経路にマーカを設置)
ここでは、Google Maps JavaScript APIで提供されている道案内サービス(DirectionsService)の利用方法を紹介します。
サンプル
このサンプルは、渋谷駅から新宿駅までの経路にMarkerを設置していきます。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=true"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var ds;
// 初期化。bodyのonloadでinit()を指定することで呼び出してます
function init() {
// Google Mapで利用する初期設定用の変数
var latlng = new google.maps.LatLng(39, 138);
var opts = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
// getElementById("map")の"map"は、body内の<div id="map">より
map = new google.maps.Map(document.getElementById("map"), opts);
// DirectionsRequest
var req = {
destination: "新宿駅",
origin: "渋谷駅",
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
ds = new google.maps.DirectionsService();
ds.route(req, directionsResultCallback);
}
function directionsResultCallback(result, status) {
if (status != google.maps.DirectionsStatus.OK) {
alert(status);
return;
}
map.setCenter(result.routes[0].overview_path[0]);
for (var i=0; i<result.routes.length; i++) {
var r = result.routes[i];
for (var j=0; j<r.overview_path.length; j++) {
var latlng = r.overview_path[j];
new google.maps.Marker({position:latlng, map:map});
}
}
}
//]]>
</script>
</head>
<body onload="init()">
<div id="map" style="width:100%; height:100%"></div>
</body>
</html>
DirectionsServiceで道案内サービスを利用するには、google.maps.DirectionsService()コンストラクタでDirectionsServiceオブジェクトを生成し、route()メソッドを使います。 route()メソッドを利用するには、要求内容を記述するDirectionsRequestオブジェクトと、結果を返すためのコールバックfunctionを引数として渡します。
DirectionsRequestに設定する項目としては、このサンプルで利用しているorigin、destination、travelModeの3つが必須です。 originが出発地点、destinationが目的地、travelModeが経路の種類(移動方法)です。 originとdestinationとしては、文字列もしくはLatLngオブジェクトが利用可能ですが、このサンプルでは文字列を利用しています。 travelModeとしては、WALKING(歩き)、BICYCLING(自転車)、DRIVING(車)の3種類が利用可能です。 このサンプルでは、DRIVINGを利用しています。
route()メソッドで指定したコールバック用のfunctionの第一引数に経路情報(DirectionsResult)が入り、第二引数に結果(DirectionsStatus)が入ります。 DirectionsStatusが「OK」であれば成功ですが、それ以外の場合は失敗となります。
このサンプルでは、DirectionsResultに含まれる一つ目の経路の最初の地点を示す座標にsetCenter()を行って、地図の中心座標を移動させています。 その後、経路の各地点に対してMarkerを設置しています。
表示例
表示例です。
