Calculating distance for each country using Google Maps API Route and FusionTable
http://stackoverflow.com/questions/28741923/how-to-calculate-distance-for-each-country-using-google-maps-api-route
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<h2><a href='http://stackoverflow.com/questions/28741923/how-to-calculate-distance-for-each-country-using-google-maps-api-route'>Question on stackoverflow</a></h2>
<h2>Thanks <a href='http://stackoverflow.com/users/459897/dr-molle'>Dr.Molle</a> for help!</h2>
<div id="locationField">
<input id="start" placeholder="From" type="text">
<input id="end" placeholder="To" type="text">
<br/>
<input id="new" placeholder="Add a scheduled stop" type="text">
<button onclick="var newPointInput = document.getElementById('new'); $waypointsArray.push({location: newPointInput.value, stopover:true}); document.getElementById('points').value += newPointInput.value + '\n'; newPointInput.value = '';">Add</button>
<br/>
<textarea id='points' rows='6' cols='60'>
</textarea>
</div>
<div>
<p>
<b>It's test values!</b>
</p>
<p>
Fuel consumption per 100 km: 8L
</p>
<p>
Fuel price 1L, Ukraine: 1.5$
</p>
<p>
Fuel price 1L, Russia: 1$
</p>
<p>
Fuel price 1L, Poland: 1.7$
</p>
<p>
Fuel price 1L, Moldova: 1.4$
</p>
<p>
Fuel price 1L, Romania : 0.5$
</p>
<p>
Fuel price 1L, Belarus: 1.2$
</p>
<p>
Fuel price 1L, other: 1.6$
</p>
<p>
Passenger count: 4
</p>
</div>
<div>
<p>
<input type="submit" value="Calculate" onclick="calcRoute()" />
</p>
<p>
<p><b>For more output look console</b></p>
<table>
<tr>
<td>
<label for="distance">Distance, km: </label>
</td>
<td>
<input type="text" name="distance" id="distance" readonly="true" />
</td>
</tr>
<tr>
<td>
<label for="time">Time, h: </label>
</td>
<td>
<input type="text" name="time" id="time" readonly="true" />
</td>
</tr>
</table>
</p>
</div>
<div id="map_canvas"></div>
CSS
#map_canvas {
height: 400px;
width: 600px;
}
JavaScript
//WARNING!
// Code works fine, but it's not optimized. Be carefully!
//WARNING!
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var $map;
var $waypointsArray = new Array();
$(document).ready(function() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 5,
scrollwheel: false
};
$map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap($map);
autocompleteStart = new google.maps.places.Autocomplete((document.getElementById('start')), {
types: ['geocode']
});
autocompleteEnd = new google.maps.places.Autocomplete((document.getElementById('end')), {
types: ['geocode']
});
autocompleteNew = new google.maps.places.Autocomplete((document.getElementById('new')), {
types: ['geocode']
});
});
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var distanceInput = document.getElementById("distance");
var timeInput = document.getElementById("time");
var allInput = document.getElementById("all");
var forOneInput = document.getElementById("for-one");
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
avoidTolls: true,
waypoints: $waypointsArray,
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var sum = 0;
var time = 0;
for (var i = 0; i < response.routes[0].legs.length; i++) {
sum += response.routes[0].legs[i].distance.value;
time += response.routes[0].legs[i].duration.value;
}
var ajaxResult = JSON.parse(getCountryPolygon(response.routes[0]).responseText);
var countries = new Array();
for (var i = 0; i < ajaxResult.rows.length; i++) {
var border = new Array();
if...