Google Maps ルート検索

授業日誌

・ブラウザ上にGooglemapを表示させ、ルート検索を行う


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google maps ルート検索</title>
<style>
#map_canvas {
	width: 700px;
	height: 500px;
}
#container {
	width: 700px;
	margin: auto;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="mapdrow.js"></script>
</head>
<body onload="initialize();">
<div id="container">
<h1>Google Maps ルート検索</h1>
<p>テキストフィールドに始点と終点を入力すると、ルート検索を行います。</p>
<p>
始点：<input type="text" name="start" id="start" size="12" maxlength="100"> &nbsp;終点：<input type="text" name="end" id="end" size="12" maxlength="100">
</p>
<p>
<input type="button" value="検索" onclick="searchRoute()">
</p>
<div id="map_canvas"></div>
</div>
</body>
</html>



var map;
var directionsRenderer;
var directions;
var err = google.maps.DirectionsStatus;
var directionsErr = new Array();
directionsErr[err.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。";
directionsErr[err.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。";
directionsErr[err.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。";
directionsErr[err.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。";
directionsErr[err.REQUEST_DENIED] = "ウェブページではルート サービスを使用できません。";
directionsErr[err.UNKNOWN_ERROR] = "サーバー エラーのため、ルート リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。";
directionsErr[err.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。";

  //onload時の処理
  function initialize() {

  //Google Maps初期設定
    var opts = {
	zoom:14,
	center:new google.maps.LatLng(35.681382,139.766084),
	mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas") , opts);		    //Google Maps作成
	
  //ルートレンダラ生成
  directionsRenderer = new google.maps.DirectionsRenderer({
    polylineOptions: {
    strokeColor: '#FF0000',
    strokeWeight: 4,
    strokeOpacity: 0.7
    }
  });	
  directionsRenderer.setMap(map);	//ルートレンダラにマップを関連付け
  }

  //検索開始
  function searchRoute() {

  //textboxからの値を取得
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;

  //検索設定
  directions = new google.maps.DirectionsService();	//ルート生成

  //ルートリクエスト
  directions.route({
    origin:start,		//開始地点
    destination:end,	//終了地点
    travelMode:google.maps.DirectionsTravelMode.DRIVING,	//ルートタイプ(車)
    avoidHighways:true,		//高速道路(使わない)
    avoidTolls:true,		//有料道路(使わない)
    optimizeWaypoints: true,	//最適化された最短距離にする。
  },
  function(results, status) {	//ルート結果コールバック関数
    if (status == err.OK) {	//検索結果がtrueの場合
	directionsRenderer.setDirections(results);
    } else {	//検索結果がfalseの場合
	alert(directionsErr[status]);
    }
    });
}