Google map driving direction source code for their example?
81,678
Solution 1
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:
Solution 2
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>
Related videos on Youtube
Comments
-
user310291 about 3 years
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 ?
-
Daniel Vassallo over 13 yearsAre you planning to use the V2 API or the V3? The latter is recommended, as V2 has been deprecated.
-
user310291 over 13 yearsV3 if it is recommanded. I'm learning now so I'd like some source code.
-
Ashish Dwivedi about 12 yearsPlease give a link for getting the source code to understands!!!
-
-
user310291 over 13 yearsThank you that's exactly what I wanted: the minimalistic example for learning.
-
manju over 13 yearshi can i add more that one destination for the same source and get route directions for all the destinations at a single time..
-
hardik almost 12 years@danial vassallo Thanx for this helpful answer. does this have language option for the response output that it gives.?
-
Deepu over 11 yearsHi 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 ?
-
Fraser almost 11 years@hardik 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
-
hardik almost 11 years@Fraser thanks fraser for that answer. actually it was an issue a long time ago, but thanks for the comment here. appreciate.
-
Fraser almost 11 years@hardik 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
-
Sudheer Kumar Palchuri about 9 years@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.
-
Clever Programmer over 8 yearsI spent FOREVER trying to get around the silly CORS problem. This was the UTLIMATE solution. Thank you so much.
-
user3732708 about 8 yearscan 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 };
-
Pete over 7 yearsYou can read the latest about directions panels here: developers.google.com/maps/documentation/javascript/examples/…
-
shiv over 5 yearsIn 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.