I'd like to calculate the driving distance in my iphone app, no matter whether the map is displayed or not. Previously, I saw some javascript that can do the work. Here is the source code for the javascript in html:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<title>Distance Calculator</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#map_canvas {
height: 100%;
}
</style>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var melbourne = new google.maps.LatLng(-37.813187, 144.96298);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: melbourne
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var distanceInput = document.getElementById("distance");
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
<p>
<label for="start">Start: </label>
<input type="text" name="start" id="start" />
<label for="end">End: </label>
<input type="text" name="end" id="end" />
<input type="submit" value="Calculate Route" onclick="calcRoute()" />
</p>
<p>
<label for="distance">Distance (km): </label>
<input type="text" name="distance" id="distance" readonly="true" />
</p>
</div>
<div id="map_canvas"></div>
</body>
Then I want to know how to call the javascript function in my iphone objective-c file.
I'm trying this in ViewController.m:
[webView loadHTMLString:@"<script src=\"calDistance.js\"></script>" baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] resourcePath]]];
NSString *function = [[NSString alloc] initWithFormat: @"calcRoute('%@', '%@')", address1,address2];
NSString *result = [webView stringByEvaluatingJavaScriptFromString:function];
self.distance.text = result;
Where calDistance.js is a javascript file contains the above 2 functions: initialize(), calcRoute(), and I also rewrite calcRoute() function to pass 2 address string. "distance" is the label that is supposed to display driving distance. However it doesn't work.
Does it has something to do with the following line which originally in javascript file?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
since I don't know how to insert this "http://maps.google.com/maps/api/js?sensor=false" link. What should I do? Is there any other problem in my code? Is my method right to calculate the driving distance?