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

by Pavel Dosenko

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true&amp;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>
          ...

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;
                   ...