Can we draw custom routes on Google maps? - json

Question

I am exploring Google maps APIs. I have a web service which returns the GeoJSON object in response. I want to render it on the Google maps. I tried below API;
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
This gives us the GeoJSON for given start and end in request parameter. I am trying to get the GeoJSON response from my service and instead of Google data, I am trying to render my own response.
The data returned from my custom service is in the same format as Google.
The data returned from Google service is in the form like
I have constructed the object same is Google DirectionsService Response.
Please check details below;
https://developers.google.com/maps/documentation/javascript/directions#DirectionsResults
"routes":[{"bounds":{"northeast":{"lat":30.2844454,"lng":-97.7040698},"southwest":{"lat":30.2121885,"lng":-97.7506593}},"copyrights":"Map
data ©2014 Google","legs":.... Steps....}
EDIT:
I tried another option with addGeoJson() API as;
function loadGeoJsonString(geoString) {
var geojson = JSON.parse(geoString);
map.data.addGeoJson(geojson);
zoom(map);
}
JSON string which I am using is validated by jsonlint.

Answer 1

Something like this?
directionsDisplay = new google.maps.DirectionsRenderer();
var Basingstoke = new google.maps.LatLng(51.2949612, -1.0643864);
var mapOptions = {
zoom:7,
center: Basingstoke
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
var point1 = new google.maps.LatLng(51.2941293,-0.9139252);
var point2 = new google.maps.LatLng(51.3250339,-0.8050919);
var wps = [{ location: point1 }, { location: point2 }];
var org = new google.maps.LatLng ( 51.2949612, -1.0643864);
var dest = new google.maps.LatLng ( 52.3069282, -0.7540226);
var request = {
origin: org,
destination: dest,
waypoints: wps,
durationInTraffic: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var newRoute = response.routes[0].legs[2].duration.value;
directionsDisplay.setDirections(response);
alert ('Travel Time: ' + newRoute + ' seconds');
}
else
alert ('failed to get directions');
});
}
google.maps.event.addDomListener(window, 'load', initialize);