You need to typecast each Object on the JSON response to the proper kind.
The web service API also doesn't return the ub property of the DirectionsResult (undocumented property), you need that as well. The DirectionsRenderer expects ub.travelMode, ub.origin and ub.destination (all strings). The origin and destination are only used if you enable the draggable property on the DirectionsRendererOptions - they are basically the same value that you pass on the DirectionsService#route() call.
Assuming you are on a browser that supports the ES5 Array#forEach method:
function typecastRoutes(routes){
routes.forEach(function(route){
route.bounds = asBounds(route.bounds);
// I don't think `overview_path` is used but it exists on the
// response of DirectionsService.route()
route.overview_path = asPath(route.overview_polyline);
route.legs.forEach(function(leg){
leg.start_location = asLatLng(leg.start_location);
leg.end_location = asLatLng(leg.end_location);
leg.steps.forEach(function(step){
step.start_location = asLatLng(step.start_location);
step.end_location = asLatLng(step.end_location);
step.path = asPath(step.polyline);
});
});
});
}
function asBounds(boundsObject){
return new google.maps.LatLngBounds(asLatLng(boundsObject.southwest),
asLatLng(boundsObject.northeast));
}
function asLatLng(latLngObject){
return new google.maps.LatLng(latLngObject.lat, latLngObject.lng);
}
function asPath(encodedPolyObject){
return google.maps.geometry.encoding.decodePath( encodedPolyObject.points );
}
So you would use it like this:
var renderer = new google.maps.DirectionsRenderer();
function renderDirections(map, response, request){
renderer.setOptions({
directions : {
routes : typecastRoutes(response.routes),
// "ub" is important and not returned by web service it's an
// object containing "origin", "destination" and "travelMode"
ub : request
},
draggable : true,
map : map
});
}
PS: make sure you load the Geometry Library otherwise the google.maps.geometry.encoding.decodePath method won't be available.
Best Answer
Using the Google Maps tiles outside of the Google Maps API is, in every case I'm aware of, a violation of the Google Maps Terms of Service. The Google Maps API does not have an ability to change where it is loading map tiles from.
I think your only solution here is to use the web server (which does, apparently, have internet access?) as a general web proxy at the browser level. Anything which tries to load the Google Maps tiles in any other way would probably be considered a violation of the terms of service.