MySQL & PHP References: Google Map API - Multiple Waypoint and Distance Calculation

Tuesday, August 21, 2018

Google Map API - Multiple Waypoint and Distance Calculation - SOLVED

I was wondering for longtime on how "MULTIPLE WAYPOINTS by adding Address New INPUTS" works thanks to GeoZipCode and I added Distance and Time taken to gravel

Criteria
Start Point
End Point
--- add ----
Multiple Waypoints

---- Return ----
Routes on Google Map
Show Total Distance
Show Time take to travel Distance

Here is the complete code for you

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> <link rel="stylesheet" type="text/css" href="result-light.css"> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script> <style type="text/css"> html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } </style>  <script type="text/javascript"> var counter = 1; var limit = 10; var i = 0; var ACoptions = { componentRestrictions: { country: "au" } }; var directionsService; var directionsDisplay; function initialize() { var inputs = document.getElementById('start'); var autocompletes = new google.maps.places.Autocomplete(inputs, ACoptions); var inpute = document.getElementById('end'); var autocompletee = new google.maps.places.Autocomplete(inpute, ACoptions); var waypoints = document.getElementsByName("waypoints[]"); for (var i = 0; i < waypoints.length; i++) { var inputw = waypoints[i]; var autocompletew = new google.maps.places.Autocomplete(inputw, ACoptions); } directionsDisplay = new google.maps.DirectionsRenderer(); directionsService = new google.maps.DirectionsService(); var melbourne = new google.maps.LatLng(-31.953512, 115.857048); var myOptions = { zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP, center: melbourne } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); google.maps.event.addDomListener(document.getElementById('getdir'), 'click', function() { calculateAndDisplayRoute(directionsService, directionsDisplay); }); } google.maps.event.addDomListener(window, "load", initialize); function addInput(divName) { if (counter == limit) { alert("You have reached the limit of adding " + counter + " inputs"); } else { var newbr = document.createElement('br'); var newtxt = document.createTextNode("" + (counter + 1)); var newinput = document.createElement("input"); newinput.setAttribute("name", "waypoints[]"); newinput.setAttribute("autocompute", "on"); newinput.setAttribute("type", "text"); // newin = (counter + 1) + "<input type=text name=waypoints[] autocomplete=on>"; document.getElementById(divName).appendChild(newbr); document.getElementById(divName).appendChild(newtxt); document.getElementById(divName).appendChild(newinput); counter++; i++; console.log("cntr=" + counter + " i=" + i + " waypoints[].length=" + document.getElementsByName("waypoints[]")); // var inputw = waypoints[i]; var autocompletew = new google.maps.places.Autocomplete(newinput, ACoptions); } } function calculateAndDisplayRoute(directionsService, directionsDisplay) { var waypts = []; var checkboxArray = document.getElementById('dynamicInput'); var waypointElmts = document.getElementsByName('waypoints[]'); for (var i = 0; i < waypointElmts.length; i++) { if (waypointElmts[i].value.length > 0) { waypts.push({ location: waypointElmts[i].value, stopover: true }); } } directionsService.route({ origin: document.getElementById('start').value, destination: document.getElementById('end').value, waypoints: waypts, optimizeWaypoints: true, travelMode: 'DRIVING' }, function(response, status) { if (status === 'OK') { directionsDisplay.setDirections(response); computeTotalDistance(response); } else { window.alert('Directions request failed due to ' + status); } }); function computeTotalDistance(result) { var totalDist = 0; var totalTime = 0; var myroute = result.routes[0]; for (i = 0; i < myroute.legs.length; i++) { totalDist += myroute.legs[i].distance.value; totalTime += myroute.legs[i].duration.value; } totalDist = totalDist / 1000. document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes"; } } </script> </head> <body> <div id="total"></div> <input id="start" value="Margaret River, AU" /> <input id="end" value="Perth, AU" /> <div id="dynamicInput"> <br>1 <input type="text" name="waypoints[]" autocomplete="on"> </div> <input type="button" value="Another Delivery" onClick="addInput('dynamicInput');"> <input id="getdir" type="button" value="get route" /> <div id="map_canvas"></div> <script> // tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "v5sh9o2z" }], "*") } </script> </body> </html>

MySQL & PHP References

Search This Blog

Tuesday, August 21, 2018

Google Map API - Multiple Waypoint and Distance Calculation - SOLVED

No comments:

Post a Comment

content-wide advt