Google Maps V3: Calculate distance and travel duration between multiple address locations

nauna

SOLVED CLOSED ACTIVE ANSWERED
User: nauna
Posted: on Nov 21, 2014 02:56 AM
Forum: Social Networking
Answer: 1
Views: 7213

Hi,

Its relate to series of question again. I have datalist bind sql server whcih is fetching 3 address like

Address 1

Address 2

Address 3

After data list I have textbox which is based address like "Based Address"

I have the below script which calculate distance between 2 textboxex.

I want to to calculate the distance between base textbox and address in datalist item so result will like this

Base Address Pune

Datalist address

Address 1 Bombay result distance between pune and bombay 200 Km

Address 1 Kolkota result distance between pune and kolkata 500 Km

 //*********DISTANCE AND DURATION**********************//
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [source],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                    var distance = response.rows[0].elements[0].distance.text;
                    var duration = response.rows[0].elements[0].duration.text;
                    var dvDistance = document.getElementById("dvDistance");
                    dvDistance.innerHTML = "";
                    dvDistance.innerHTML += "Distance: " + distance + "<br />";
                    dvDistance.innerHTML += "Duration:" + duration + "<br />";

                } else {
                    alert("Unable to find the distance via road.");
                }
            });

Mudassar

0 6

Reply
ANSWER
User: Mudassar
Replied: on Nov 21, 2014 04:31 AM
Report

You cannot use Directions service but you can get the distance in following way

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript">
        var source, destination;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        google.maps.event.addDomListener(window, 'load', function () {
            //            new google.maps.places.SearchBox(document.getElementById('txtSource'));
            //            new google.maps.places.SearchBox(document.getElementById('txtDestination'));
            directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
        });

        function GetRoute() {
            var mumbai = new google.maps.LatLng(18.9750, 72.8258);
            var mapOptions = {
                zoom: 11,
                center: mumbai
            };
            map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('dvPanel'));

            //*********DIRECTIONS AND ROUTE**********************//
            source = document.getElementById("txtSource").value.split('|');
            destination = document.getElementById("txtDestination").value.split('|');

            //*********DISTANCE AND DURATION**********************//
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: source,
                destinations: destination,
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status == google.maps.DistanceMatrixStatus.OK) {
                    var dvDistance = document.getElementById("dvDistance");
                    dvDistance.innerHTML = "";
                    for (var i = 0; i < response.rows.length; i++) {
                        var row = response.rows[i];
                        if (row.elements[0].status != "ZERO_RESULTS") {
                            var src = response.originAddresses[i];
                            var dest = response.destinationAddresses[i];
                            var distance = row.elements[0].distance.text;
                            var duration = row.elements[0].duration.text;
                            dvDistance.innerHTML += "Source: " + src + "<br />";
                            dvDistance.innerHTML += "Destination: " + dest + "<br />";
                            dvDistance.innerHTML += "Distance: " + distance + "<br />";
                            dvDistance.innerHTML += "Duration:" + duration + "<br /><br />";
                            addMarker(map, src);
                            addMarker(map, dest);
                        }
                    }
                } else {
                    alert("Unable to find the distance via road.");
                }
            });
        };
        var markers = new Array();
        function addMarker(map, location) {
            var bounds = new google.maps.LatLngBounds();
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': location }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    bounds.extend(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                    markers.push(marker);
                } else {
                    alert('Geocode was not successful');
                }
            });
        }
    </script>
    <table border="0" cellpadding="0" cellspacing="3">
        <tr>
            <td colspan="2">
                Source:
                <input type="text" id="txtSource" value="Bandra,Mumbai|Goregaon,Mumbai|Kurla,Mumbai"
                    style="width: 200px" />
                &nbsp; Destination:
                <input type="text" id="txtDestination" value="Borivali,Mumbai|Kurla,Mumbai|Sion,Mumbai"
                    style="width: 200px" />
                <br />
                <input type="button" value="Get Route" onclick="GetRoute()" />
                <hr />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="dvDistance">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="dvMap" style="width: 500px; height: 500px">
                </div>
            </td>
            <td>
                <div id="dvPanel" style="width: 500px; height: 500px">
                </div>
            </td>
        </tr>
    </table>
    <br />
</body>
</html>

Demo

Google Maps V3: Calculate distance and travel duration between multiple address locations

Company

Explore

Follow us

Contact Us