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.

    @shashank.garg
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 3.2k
    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.

    2. <table border="0" cellpadding="0" cellspacing="3">
    3. <tr>
    4.     <td colspan="2">
    5.         Source:
    6.         <input type="text" id="txtSource" value="" style="width: 200px" />
    7.         &nbsp; Destination:
    8.         <input type="text" id="txtDestination" value="" style="width: 200px" />
    9.         <br />
    10.         <input type="button" value="Get Route" onclick="GetRoute()" />
    11.         <hr />
    12.     </td>
    13. </tr>
    14. <tr>
    15.     <td colspan="2">
    16.         <div id="dvDistance">
    17.         </div>
    18.     </td>
    19. </tr>
    20. <tr>
    21.     <td>
    22.         <div id="dvMap" style="width: 500px; height: 500px">
    23.         </div>
    24.     </td>
    25.     <td>
    26.         <div id="dvPanel" style="width: 500px; height: 500px">
    27.         </div>
    28.     </td>
    29. </tr>
    30. </table>
    31.  

    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.

    2. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    3. <script type="text/javascript">
    4. var source, destination;
    5. var directionsDisplay;
    6. var directionsService = new google.maps.DirectionsService();
    7. google.maps.event.addDomListener(window, 'load', function () {
    8.     new google.maps.places.SearchBox(document.getElementById('txtSource'));
    9.     new google.maps.places.SearchBox(document.getElementById('txtDestination'));
    10.     directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
    11. });
    12.  
    13. function GetRoute() {
    14.     map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
    15.     directionsDisplay.setMap(map);
    16.     directionsDisplay.setPanel(document.getElementById('dvPanel'));
    17.  
    18.     //*********DIRECTIONS AND ROUTE**********************//
    19.     source = document.getElementById("txtSource").value;
    20.     destination = document.getElementById("txtDestination").value;
    21.  
    22.     var request = {
    23.         origin: source,
    24.         destination: destination,
    25.         travelMode: google.maps.TravelMode.DRIVING
    26.     };
    27.     directionsService.route(request, function (response, status) {
    28.         if (status == google.maps.DirectionsStatus.OK) {
    29.             directionsDisplay.setDirections(response);
    30.         }
    31.     });
    32.  
    33.     //*********DISTANCE AND DURATION**********************//
    34.     var service = new google.maps.DistanceMatrixService();
    35.     service.getDistanceMatrix({
    36.         origins: [source],
    37.         destinations: [destination],
    38.         travelMode: google.maps.TravelMode.DRIVING,
    39.         unitSystem: google.maps.UnitSystem.METRIC,
    40.         avoidHighways: false,
    41.         avoidTolls: false
    42.     }, function (response, status) {
    43.         if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
    44.             var distance = response.rows[0].elements[0].distance.text;
    45.             var duration = response.rows[0].elements[0].duration.text;
    46.             var dvDistance = document.getElementById("dvDistance");
    47.            dvDistance.innerHTML = "";
    48.             dvDistance.innerHTML += "Distance: " + distance + "<br />";
    49.             dvDistance.innerHTML += "Duration:" + duration;
    50.  
    51.         } else {
    52.             alert("Unable to find the distance via road.");
    53.         }
    54.     });
    55. }
    56. </script>
    57.  

     

    That's it we all have in it.

    php google API distance between two locations
    Comment on it

 1 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: