Google maps api highway vs road distance

Question

I use google maps api to calculate the route from point A to point B. The "The DirectionsResult" object gives me a lot of information regarding the distance, etc. https://developers.google.com/maps/documentation/javascript/directions#DirectionsResults

However, I am interested to know what distance (part) of the route is on HIGHWAY roads and what part is on CITY roads.

How can i do this?

Thanks!

Answer 1

It is not possible to use the API to distinguish between highways and highways.

However, you can make the difference yourself by calculating the speed for each leg in the route.

Meta code:

// find meters per second and convert to miles per hour mph = (route.leg[i].distance.value / route.leg[i].duration.value) * 2.23694 if mph >= 55 route.leg[i].road = highway else route.leg[i].road = city 

Obviously, this will not work if the results take into account traffic conditions.

example

 var infowindow = new google.maps.InfoWindow(); var directions = new google.maps.DirectionsService(); var renderer = new google.maps.DirectionsRenderer({ suppressPolylines: true, infoWindow: infowindow, }); var map; function initialize() { var mapOptions = { zoom: 13, center: new google.maps.LatLng(40.7482333, -73.8681295), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), mapOptions); google.maps.event.addDomListener(document.getElementById('go'), 'click', route); route(); } function route() { var request = { origin: document.getElementById('from').value, destination: document.getElementById('to').value, travelMode: google.maps.DirectionsTravelMode.DRIVING }; var panel = document.getElementById('panel'); panel.innerHTML = ''; directions.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { renderer.setDirections(response); renderer.setMap(map); renderer.setPanel(panel); renderDirectionsPolylines(response); console.log(renderer.getDirections()); } else { renderer.setMap(null); renderer.setPanel(null); } }); } var polylineOptions = { strokeColor: '#C83939', strokeOpacity: 1, strokeWeight: 4 }; var polylines = []; function renderDirectionsPolylines(response) { for (var i = 0; i < polylines.length; i++) { polylines[i].setMap(null); } var legs = response.routes[0].legs; for (i = 0; i < legs.length; i++) { var steps = legs[i].steps; for (j = 0; j < steps.length; j++) { // find meters per second and convert to miles per hour var mph = (steps[j].distance.value / steps[j].duration.value) * 2.23694 if (mph >= 55) { // route.leg[i].road = highway color = "#FF0000"; } else { // route.leg[i].road = city color = "black"; } console.log("step " + j + " color=" + color + " mph=" + mph + " dist=" + steps[j].distance.value + " meters/time=" + steps[j].duration.value + " seconds"); var nextSegment = steps[j].path; polylineOptions.strokeColor = color; var stepPolyline = new google.maps.Polyline(polylineOptions); for (k = 0; k < nextSegment.length; k++) { stepPolyline.getPath().push(nextSegment[k]); } polylines.push(stepPolyline); stepPolyline.setMap(map); // route click listeners, different one on each step google.maps.event.addListener(stepPolyline, 'click', (function(mph) { return function(evt) { infowindow.setContent("you clicked on the route<br>speed ~= " + mph.toFixed(2) + " mph<br>" + evt.latLng.toUrlValue(6)); infowindow.setPosition(evt.latLng); infowindow.open(map); } }(mph))); } } } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body { height: 100%; padding: 0; margin: 0; color: black; font-family: arial, sans-serif; font-size: 13px; } #map { position: absolute; top: 0; bottom: 0; left: 0; right: 50%; } #panel-wpr { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; overflow: auto; } #panel { font-family: arial; padding: 5px 5px; } #info { padding: 5px; } #from, #to { width: 90%; font-size: 1.2em; } .adp-directions { width: 100%; } .input { background-color: white; padding-left: 8px; border: 1px solid #D9D9D9; border-top: 1px solid silver; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .time { margin: 0; height: 17px; border: 1px solid; border-top-color: #CCC; border-right-color: #999; border-left-color: #999; border-bottom-color: #CCC; padding: 2px 15px 1px 1px; } button { border: 1px solid #3079ED; color: white; background-color: #4D90FE; background-image: -webkit-gradient(linear, left top, left bottom, from(#4D90FE), to(#4787ED)); background-image: -webkit-linear-gradient(top, #4D90FE, #4787ED); background-image: -moz-linear-gradient(top, #4D90FE, #4787ED); background-image: -ms-linear-gradient(top, #4D90FE, #4787ED); background-image: -o-linear-gradient(top, #4D90FE, #4787ED); background-image: linear-gradient(top, #4D90FE, #4787ED); filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe', EndColorStr='#4787ed'); display: inline-block; min-width: 54px; text-align: center; font-weight: bold; padding: 0 8px; line-height: 27px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: all 0.218s; -moz-transition: all 0.218s; -o-transition: all 0.218s; transition: all 0.218s; } #info div { line-height: 22px; font-size: 110%; } .btn {} #panel-wpr { border-left: 1px solid #e6e6e6; } #info { border-bottom: 1px solid #E6E6E6; margin-bottom: 5px; } h2 { margin: 0; padding: 0; } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div> <div id="panel-wpr"> <div id="info"> <div> <label>from:</label> <input id="from" value="New York, NY" /> </div> <div> <label>to:</label> <input id="to" value="Philadelphia, PA" /> </div> <div class="btn"> <button id="go">Get Directions</button> </div> </div> <div id="panel"></div> </div>