Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Calculate distance between two addresses / points / locations using Google map API.

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 1.23k
    Comment on it

    Hello Readers ,

    In this blog we are calculating distance between two address / points / locations using Google Maps V3 API.

    First we have one small HTML having source and destination fields after clicking the submit function "GetRoute" is called and do the process.

    
    <table border="0" cellpadding="0" cellspacing="3">
    <tr>
        <td colspan="2">
            Source:
            <input type="text" id="txtSource" value="" style="width: 200px" />
            &nbsp; Destination:
            <input type="text" id="txtDestination" value="" 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>
    

    When the Button is clicked, first the Map and the Directions service is initialized to display the map and the directions in their respective HTML DIVs. 

    Then fetching the source and destination values from the textboxes the details of the directions, route, distance and duration are displayed inside the respective HTML DIVs.

    
    <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() {
        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;
        destination = document.getElementById("txtDestination").value;
     
        var request = {
            origin: source,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
     
        //*********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;
     
            } else {
                alert("Unable to find the distance via road.");
            }
        });
    }
    </script>
    

     

    That's it we all have in it.

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: