dimanche 21 août 2011

Google Maps API: Getting the distance, driving duration and driving directions between two adresses

Sometimes you may want to get the distance between addresses and maybe suggest driving directions. The Google Maps API Web Services makes this possible with the DirectionService and DistanceMatrixService classes. Below is a JavaScript undocumented snippet that does the task and more details about the fore mentioned services can be found in the above link. A walk through of the code would freely be given upon request.


1:  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>   
2:    <script type="text/javascript">   
3:       
4:     var directionsService = new google.maps.DirectionsService();  
5:           
6:       
7:     var origin1 = "Nice, France";   
8:     var origin2 = "Buea, Cameroon";  
9:    
10:    
11:     var destination = "Montpellier, France";  
12:     var destination2 = "Douala, Cameroon";  
13:       
14:     function calculateDistances() {  
15:      var service = new google.maps.DistanceMatrixService();  
16:      service.getDistanceMatrix(  
17:       {  
18:        origins: [origin1, origin2],  
19:        destinations: [destination1, destination2],  
20:        travelMode: google.maps.TravelMode.DRIVING,  
21:        unitSystem: google.maps.UnitSystem.METRIC,  
22:        avoidHighways: false,  
23:        avoidTolls: false  
24:       }, callback);  
25:     }  
26:    
27:     function callback(response, status) {  
28:          
29:      if (status != google.maps.DistanceMatrixStatus.OK) {  
30:       alert('Error was: ' + status);  
31:      } else {  
32:              
33:       var origins = response.originAddresses;  
34:       var destinations = response.destinationAddresses;  
35:       var outputDiv = $('#outputDiv'); //div to hold distance and driving time  
36:       outputDiv.html('');  
37:         
38:       var html = "<b> <br /> Ground Estimates <br /><br /> </b>";  
39:               
40:       for (var i = 0; i < origins.length; i++) {  
41:       var results = response.rows[i].elements;  
42:          
43:        for (var j = 0; j < results.length; j++) {  
44:           
45:                  html += " Path : "+ origins[i] + " to " + destinations[j] + "<br />";  
46:                  html +="<b> Approx. Distance </b>: "+ results[j].distance.text + "<br />";  
47:                  html +="<b> Approx. Duration </b>: "+ results[j].duration.text + "<br /><br />";  
48:                         
49:                  getDrivingDirections(origins[i], destinations[j]);  
50:                    
51:        }  
52:       }  
53:              $('#outputDiv').html(html);  
54:                
55:      }  
56:     }  
57:          
58:     function getDrivingDirections(start, end) {  
59:        
60:      var request = {  
61:       origin: start,  
62:       destination: end,  
63:       travelMode: google.maps.DirectionsTravelMode.DRIVING  
64:      };  
65:              
66:      directionsService.route(request, function(response, status) {  
67:       if (status == google.maps.DirectionsStatus.OK) {  
68:                  //routes  
69:                 var routes = response.routes;  
70:                 for(i = 0; i < routes.length; i++){  
71:                      //legs  
72:                      var legs = response.routes[i].legs;  
73:                      for(j = 0; j < legs.length; j++){  
74:                           //steps  
75:                           var steps = legs[j].steps;  
76:                                for(k = 0; k < steps.length; k++){  
77:                                    //put content in container for driving directions (outputDiv2)  
78:                                     $('#outputDiv2').append('<p>'+steps[k].instructions+'<br /></p>');  
79:                                       
80:                                }  
81:                      }  
82:                 }  
83:                    
84:       }  
85:      });  
86:    
87:    
88:     }  
89:    
90:      calculateDistances();  
91:    </script>  



There are numerous methods and parameters these services offer to better present your results which are not indicated here. Visit Google Maps API Web Services to know more...

2 commentaires:

  1. Sorry the code indentation drives me mad...

    RépondreSupprimer
  2. This is implemented in http://www.guidoon.com/transfers. (choose a transfer path and see it's details) http://www.guidoon.com/ is an online touristic operator for Nice, France developed by me

    RépondreSupprimer