Google Maps API V3のルートサービスを使う時のサンプル

Google Maps API V3のルートサービスを使った地図を表示させる時のサンプルコードです。
座標データをxmlファイルから読み込む形にして、地図上に「ウェイポイント」（中継地点）を表示させます。
マーカーをクリックした際に出てくる吹き出しの中身を自由に書き換えたかったのですが、その辺のコードがapiのガイドには出ていませんでした。
ただ、吹き出しの中身を変更すると、Directions Panel（右側の案内テキスト）を表示させた際の表示で、出発地点のみ吹き出しの中身とDirections Panelの中身が共通になってしまう問題が未解決。

ルートサービスのルートをカスタマイズするには、DirectionsServiceにリクエストを送信した際に受け取るDirectionsResultsオブジェクトをいじると大体の事はできそう。

サンプルを表示

読み込んでるxml（青梅のラーメン屋さんめぐり）

javascript
jqueryを使ってます。

rendererOptions = {
	draggable: false,
	preserveViewport: false
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();

var map;

function initialize() {
	var center = new google.maps.LatLng(35.793206,139.286213);
	var zoom = 12;
	var mapTypeId = google.maps.MapTypeId.ROADMAP

	var opts = {
		center: center,
		zoom: zoom,
		mapTypeId: mapTypeId
	};

	map = new google.maps.Map(document.getElementById("map_canvas"), opts);
	directionsDisplay.setPanel(document.getElementById("directionsPanel"));

	directionsDisplay.setMap(map);
	loadXml();
}

function loadXml() {
	var mapid = $('#map_canvas').attr('map');
	$.ajax({
		url: 'ramen.xml',
		type: 'GET',
		dataType: 'xml',
		timeout: 1000,
		error: function () {
			alert("xmlファイルの読み込みに失敗しました");
		},
		success: function (xml) {
			var data = new Array();
			data['waypoints'] = new Array();
			var mk = new Array();

			$(xml).find("origin").each(function () {
				data['origin'] = {
					'location': $(this).find('location').text(),
					'address': $(this).find('address').text(),
					'name': $(this).find('name').text()
				};
			});
			$(xml).find("destination").each(function () {
				data['destination'] = {
					'location': $(this).find('location').text(),
					'address': $(this).find('address').text(),
					'name': $(this).find('name').text()
				};
			});
			var i = 1;
			$(xml).find("waypoints").each(function () {
				var shop = {
					'location': $(this).find('location').text(),
					'address': $(this).find('address').text(),
					'name': $(this).find('name').text()
				};
				data['waypoints'].push(shop);
				i++;
			});
			calcRoute(data);
		}
	});
}


function calcRoute(data) {
	var points = new Array();
	for (var i in data['waypoints']) {
		points.push({
			location: data['waypoints'][i]['location'],
			stopover: true
		});
	}
	var request = {
		origin: data['origin']['location'],
		destination: data['destination']['location'],
		waypoints: points,
		travelMode: google.maps.DirectionsTravelMode.DRIVING,
		unitSystem: google.maps.DirectionsUnitSystem.METRIC,
		optimizeWaypoints: false,
		avoidHighways: false,
		avoidTolls: false
	};

	directionsService.route(request, function (response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			var route = response.routes[0];
			route.legs[0].start_address = "<strong>" + data['origin']['name'] +"</strong><br />"+ data['origin']['address'] + "<br />";//1件目の吹き出しを設定（directionsPanelもこれになっちゃう）
			var o = 0;
			for (var i in data['waypoints']) {
				route.legs[o + 1].start_address = "<strong>" + data['waypoints'][i]['name'] + "</strong><br />" + data['waypoints'][i]['address'] + "<br />";//waypointsの吹き出しを設定
				o++;
			}
			route.legs[o].end_address = "<strong>" + data['destination']['name'] +"</strong><br />"+ data['destination']['address'];//最終地点の吹き出しを設定（directionsPanelもこれになっちゃう）

			directionsDisplay.setDirections(response);
		}
	});
}

APIのドキュメントに大体書いてある。