マルティスープ
Staff Blog

// 道路へのスナップのリクエスト
// (引数originalPathには、元の位置情報の緯度・経度を","で繋げたペアを、
// "|"で繋げたものを渡すこととします)
// (例: "35.690864,139.758896|35.690359,139.759400|35.689461,139.760151")
function requestSnapToRoads(originalPath){
	$.get("https://roads.googleapis.com/v1/snapToRoads", {
		interpolate: true,	// 補完を行うかどうか
		key: roadsApiKey,
		path: originalPath
	}, function(data){
		processResponse(data);
	});
};

// レスポンス処理
function processResponse(data){
	var snappedCoordinates = [];
	for(var i = 0; i < data.snappedPoints.length; i++){
		// スナップされた地点の取得
		var position = new google.maps.LatLng(
			data.snappedPoints[i].location.latitude,
			data.snappedPoints[i].location.longitude);
		snappedCoordinates.push(position);

		// スナップされた地点へのマーカー表示
		var marker = new google.maps.Marker({
			position: position,
			map: map,
			icon: markerImage,
		});

		// 補完された地点(元の位置情報には無かった地点)については、
		// マーカーラベルを"x"として半透明で表示する
		if("originalIndex" in data.snappedPoints[i]){
			marker.setLabel((data.snappedPoints[i].originalIndex+1)+"");
		} else {
			marker.setLabel("x");
			marker.setOpacity(0.5);
		}
	}

	// スナップされた地点をもとにPolylineを表示
	var polyline = new google.maps.Polyline({
		path: snappedCoordinates,
		strokeColor: strokeColor,
		strokeWeight: 3
	});
	polyline.setMap(map);
}

{
	"snappedPoints": [
		{
			"location": {
				"latitude": 35.690866,
				"longitude": 139.75886939999998
			},
			"originalIndex": 0,
			"placeId": "ChIJlasEQg6MGGAR2wLqjbQ_w7I"
		},
		{
			"location": {
				"latitude": 35.6907644,
				"longitude": 139.75884660000003
			},
			"placeId": "ChIJlasEQg6MGGAR2wLqjbQ_w7I"
		},
		(省略)

// スナップされた地点の取得
var position = new google.maps.LatLng(
	data.snappedPoints[i].location.latitude,
	data.snappedPoints[i].location.longitude);

// 補完された地点(元の位置情報には無かった地点)については、
// マーカーラベルを"x"として半透明で表示する
if("originalIndex" in data.snappedPoints[i]){
	marker.setLabel((data.snappedPoints[i].originalIndex+1)+"");
} else {
	marker.setLabel("x");
	marker.setOpacity(0.5);
}