Hi Everybody, Below I present a simple solution to show the route on a mapview without using any third party modules.
The solution works perfectly for IOS and Android, I am currently using Titanium version 2.1.4 on my Mac.
Before I get to the solution, a little background, we used to compute routes using Google's kml API which was revoked by Google leaving us stranded. I did notice some third party modules in the marketplace, which although functioned, had lots of performance issues. On checking Google's new API I realized using it would be a piece of cake, and it does work fabulously. I have not tested this code for mobile web since we make exclusive android and IOS applications.
Please test and let me know if the code can be improved. NOTE: The new Google API uses both xml and JSON return types. I used XML which can be easily replaced by JSON. You just need to replace the word 'xml' by 'json' in the request url and obviously the parsing will need to be different
//WE USE mapView object TO DISPLAY THE MAP, PLEASE DECLARE IT BEFORE THIS CODE var singleRoute = null; function GetRoutePoints(startX, startY, destX, destY) { var url = "http://maps.googleapis.com/maps/api/directions/xml?origin=" + startX + "," + startY + "&destination=" + destX + "," + destY + "&sensor=false"; var request = Titanium.Network.createHTTPClient(); request.onload = function() { InitRouteData({ dashData : [ 1, this.responseText ] }); }; request.onerror = function() { InitRouteData({ dashData : [ -1, String.serverErr ] }); }; request.open("GET", url); request.send(null); } function InitRouteData(e) { if (e.dashData[0] == -1) { alert("Cannot Connect to the net"); } else { if(Ti.XML.parseString(e.dashData[1]).getElementsByTagName( 'status').item(0).text != "OK"){ alert("Cannot Show Route"); return; } var n = Ti.XML.parseString(e.dashData[1]).getElementsByTagName( 'step'); var points = []; for ( var i = 0; i < n.length; i++) { points.push({ latitude : n.item(i).getElementsByTagName('start_location') .item(0).getElementsByTagName('lat').item(0).text, longitude : n.item(i) .getElementsByTagName('start_location').item(0) .getElementsByTagName('lng').item(0).text }); if (i == n - 1) { points.push({ latitude : n.item(i).getElementsByTagName( 'end_location').item(0).getElementsByTagName( 'lat').item(0).text, longitude : n.item(i).getElementsByTagName( 'end_location').item(0).getElementsByTagName( 'lng').item(0).text }); } } singleRoute = { name : "1", points : points, color : "blue", width : 4 }; mapView.addRoute(singleRoute); } } function RemoveRoute(){ if (singleRoute != null) { mapView.removeRoute(singleRoute); } }Thanks