Google map driving direction source code for their example?

Asked 9/10, 2010 at 16:27 Answered 26/3, 2021 at 11:10

Solved google-maps google-maps-api-3 driving-directions

Google gave an example http://googlemapsapi.blogspot.com/2007/05/driving-directions-support-added-to.html

Is the source code available somewhere or a tutorial on that precise example ?

Harrar answered 9/10, 2010 at 16:27 Comment(3)

Are you planning to use the V2 API or the V3? The latter is recommended, as V2 has been deprecated. – Cavitation 9/10, 2010 at 16:44

V3 if it is recommanded. I'm learning now so I'd like some source code. – Harrar 9/10, 2010 at 17:24

Please give a link for getting the source code to understands!!! – Cryptogram 20/3, 2012 at 6:6

Here's a very basic example using the v3 API:

<!DOCTYPE html>
    <html> 
    <head> 
       <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
       <title>Google Maps API v3 Directions Example</title> 
       <script type="text/javascript" 
               src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </head> 
    <body style="font-family: Arial; font-size: 12px;"> 
       <div style="width: 600px;">
         <div id="map" style="width: 280px; height: 400px; float: left;"></div> 
         <div id="panel" style="width: 300px; float: right;"></div> 
       </div>
       
       <script type="text/javascript"> 
    
         var directionsService = new google.maps.DirectionsService();
         var directionsDisplay = new google.maps.DirectionsRenderer();
    
         var map = new google.maps.Map(document.getElementById('map'), {
           zoom:7,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         });
        
         directionsDisplay.setMap(map);
         directionsDisplay.setPanel(document.getElementById('panel'));
    
         var request = {
           origin: 'Chicago', 
           destination: 'New York',
           travelMode: google.maps.DirectionsTravelMode.DRIVING
         };
    
         directionsService.route(request, function(response, status) {
           if (status == google.maps.DirectionsStatus.OK) {
             directionsDisplay.setDirections(response);
           }
         });
       </script> 
    </body> 
    </html>

Screenshot:

Google Maps API v3 Directions Example

Cavitation answered 10/10, 2010 at 2:39 Comment(12)

Thank you that's exactly what I wanted: the minimalistic example for learning. – Harrar 10/10, 2010 at 8:12

hi can i add more that one destination for the same source and get route directions for all the destinations at a single time.. – Passim 7/2, 2011 at 5:11

@danial vassallo Thanx for this helpful answer. does this have language option for the response output that it gives.? – Grass 6/7, 2012 at 16:57

Hi Daniel, I had implemented your answer, it works fine, i modified it little bit, i added alternative:true in request, so it giving me multiple routes, and if i clicked on one of the route, it immediately show route on Map, now i want to know that and which route user has clicked ? is there any way to save the details of that route ? can u please suggest me something ? – Berlyn 24/12, 2012 at 8:17

@Grass To change language, you need to modify the call to the maps API ie for French: maps.google.com/maps/api/js?sensor=false&language=fr – Dekow 22/7, 2013 at 15:24

@Dekow thanks fraser for that answer. actually it was an issue a long time ago, but thanks for the comment here. appreciate. – Grass 23/7, 2013 at 9:14

@Grass no probs. I saw it was a while back but thought I'd offer help for anyone else coming to the post if they needed it. Cheers – Dekow 23/7, 2013 at 9:37

@Daniel Vassallo: I want to show the text based directions which you showed in attached screen shot in iOS Mobile App. Can you please provide me the API where can i get that response. – Flite 1/4, 2015 at 4:8

I spent FOREVER trying to get around the silly CORS problem. This was the UTLIMATE solution. Thank you so much. – Indissoluble 8/1, 2016 at 2:51

can any one say that how can I add lontitude /latitude to replace city name here t replace city name, according to above example var request = { origin: 'Chicago', destination: 'New York', travelMode: google.maps.DirectionsTravelMode.DRIVING }; – Parody 23/2, 2016 at 5:43

You can read the latest about directions panels here: developers.google.com/maps/documentation/javascript/examples/… – Newby 9/1, 2017 at 22:2

In the same code, I want to show direction from my current location to a lat long, Also when I move then my marker should move. Same like google map app. Is it possible? If yes please tell me how can I do it with java-script and php. I have google map driving direction API key. – Trying 13/12, 2018 at 6:3

Code to get route, legs and other data using Latitude/longitude OR using Address without google map in JavaScript using v3 API:

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=<key>&libraries=places"></script>

<script>
    var directionsService = new google.maps.DirectionsService();

    var start_lat = "41.8781136";
    var start_lon = "-87.6297982";
    var end_lat = "40.7127753";
    var end_lon = "-74.0059728";

    // Using Latitude and longitude
    var request = {
        origin: new google.maps.LatLng(start_lat, start_lon),
        destination: new google.maps.LatLng(end_lat, end_lon),
        optimizeWaypoints: true,
        avoidHighways: false,
        avoidTolls: false,
        travelMode: google.maps.TravelMode.DRIVING
    };

    //Using plain address
    // var request = {
    //     origin: { query: "Chicago, IL, USA" },
    //     destination: {  query: "New York, NY, USA" },
    //     travelMode: google.maps.TravelMode.DRIVING,
    // };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            var route = response.routes[0];
            var leg = response.routes[0].legs[0];
            var polyline = route.overview_polyline;
            var distance = route.legs[0].distance.value;
            var duration = route.legs[0].duration.value;

            console.log(route); // Complete route
            console.log(distance); // Only distance 
            console.log(duration); // Only duration
            console.log(leg); // Route options/list
            console.log(polyline); // Polyline data
        }
    });

</script>

Carmen answered 26/3, 2021 at 11:10 Comment(0)

Recommended topics

Hot tags