試すことができる 1 つのことは、Google マップの Polyline オブジェクトです: https://developers.google.com/maps/documentation/javascript/reference#Polyline ポイントの順序付けられたリスト (LatLng または配列のいずれか) を setPath() に指定します。 MVCArray または LatLng) をマップ上で接続すると、Google マップが仕様に合わせてポリラインを作成します。
// path = Array of LatLng or MVCArray of LatLng
routeLine = new Polyline();
routeLine.setPath(JSONArray);
あなたの場合、 JSONArray を setPath に渡すと問題なく動作するはずです。
工夫を凝らして道順を組み込みたい場合は、Google Directions API を使用する必要があります。 https://developers.google.com/maps/documentation/javascript/directions
// All waypoints must be stopovers for the Directions service to optimize their route.
// start & end are of type String or LatLng, waypts is an array of String or LatLng
request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: [type Boolean],
travelMode: [type TravelMode]
};
// go on and actually perform the request
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
// if successful, this will run
}
});
オブジェクトの構築が完了したら、次のように setMap(map:Map) を実行して表示できるはずです。
routeLine.setMap(map)