【Google map api 】Route APIの移行

概要

2025年3月1日からGoogle maps apiの料金体系が大幅改定により、ルート検索のAPIのDirection APIをRoutes APIに早めに移行する必要があります。

ここではRoutes APIのサンプルプログラムを掲載します。

【重要なお知らせ】Google Maps Platformの現行の無償枠廃止を含む重要な変更について ｜Google Maps Platform｜ゼンリンデータコム法人向けサービス

2025年3月1日からGoogle Maps Platformの料金体系が変更され、現行の無償枠が廃止されます。 新料金...

www.zenrin-datacom.net

内容

• 事前にgoogle mapの地図のオブジェクトを定義して、mapという変数にする。
• “GOOGLE MAP API KEY”にAPIキーを設定する。
• async/awaitを用いて非同期で関数を実行する。
• result.routesが未定義の場合、エラー処理となる。(result.routesが存在する場合は正常)

//////////////////////////////////////////////////////////////////////
//最寄駅のルート検索を描画
//引数1:origin : 始点の経度・緯度
//引数2:destination :終点の駅名
//////////////////////////////////////////////////////////////////////
var polyObj  = new Array();
async function routes(origin,destination) {

	const apiKey = "GOOGLE MAP API KEY"; 
	const url = "https://routes.googleapis.com/directions/v2:computeRoutes";

	var body = {};
	body = 	{"origin": {
					"location": {
						"latLng": {
							"latitude":  origin[0]['lat'], 
							"longitude": origin[0]['lng'],
						},
					},
				}
			}
	

	body["destination"]= {}; 
	body["destination"]["address"] = destination;


	body["travelMode"] = "WALK";
	body["polylineQuality"] = "OVERVIEW";


	const response = await fetch(url, {
	method: "POST",
	headers: {
		"Content-Type": "application/json",
		"X-Goog-Api-Key": apiKey,
		"X-Goog-FieldMask":
		"routes.duration,routes.distanceMeters,routes.polyline.encodedPolyline",
	},
	//JSON 文字列に変換
	body: JSON.stringify(body),
	});	
	
	const result = await response.json();

	//エラー処理
	if(typeof result.routes == 'undefined'){
		console.log("Google Routes API エラー");
		console.log(result.error.code );
		alert("Google Routes API エラー : " + result.error.status);
		return;
	}
	//徒歩時間
	let duration = result.routes[0].duration; //秒  
	
	//ポリライン
	const polyline = result.routes[0].polyline.encodedPolyline;

	const decodedPath = google.maps.geometry.encoding.decodePath(polyline);

	//検索ルートを描画
	var lineSymbol = {
		path: 'M 0,-1 0,1',
		strokeOpacity: 1,
		scale: 4
	};


	var pobj_cnt = polyObj.length;
	//ルートのクリア
	polyObj[pobj_cnt]  = new google.maps.Polyline({
		geodesic: true,
		icons: [{
		icon: lineSymbol,
		offset: '0',
		repeat: '20px'
				}],
		strokeColor: "#2196f3",//線の色
		strokeOpacity: 0, //線の不透明度
		strokeWeight: 5,  //先の太さ
		path: decodedPath,//描画するパスデータ
		map:map,//描画先の地図
	});

}