All geek questions in one place

Calculate distance and duration on Google Maps

I need to calculate the distance and duration through geocodes using Google Maps (in India). Any code or solution will help.

+2
source share
2 answers

You can use the GDirections.getDistance() and GDirections.getDuration() methods, as shown in the following example:

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps GDirections Demo</title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" type="text/javascript"></script> </head> <body onunload="GUnload()" style="font-family: Arial; font-size: 12px;"> <div id="map" style="width: 400px; height: 300px"></div> <div id="duration">Duration: </div> <div id="distance">Distance: </div> <script type="text/javascript"> var map = new GMap2(document.getElementById("map")); var directions = new GDirections(map); directions.load("from: Chennai, India to: Mumbai, India"); GEvent.addListener(directions, "load", function() { // Display the distance from the GDirections.getDistance() method: document.getElementById('distance').innerHTML += directions.getDistance().meters + " meters"; // Display the duration from the GDirections.getDuration() method: document.getElementById('duration').innerHTML += directions.getDuration().seconds + " seconds"; }); </script> </body> </html>

Google Maps GDirections Demo

+2
source 
  <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Directions Complex</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body style="font-family: Arial; font-size: 13px; color: red;"> <div id="map" style="width: 400px; height: 300px;"></div> <div id="duration">Duration: </div> <div id="distance">Distance: </div> <script type="text/javascript"> var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var myOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map"), myOptions); directionsDisplay.setMap(map); var request = { origin: 'Chicago', destination: 'New York', travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { // Display the distance: document.getElementById('distance').innerHTML += response.routes[0].legs[0].distance.value + " meters"; // Display the duration: document.getElementById('duration').innerHTML += response.routes[0].legs[0].duration.value + " seconds"; directionsDisplay.setDirections(response); } }); </script> </body> </html>
0
source

Source: https://habr.com/ru/post/1203851/

More articles:


All Articles