Google Direction API directionsService.route() does not return result -
i have tried utilise direction api calculate distance between 2 places. however, .route() service not seem hold.
$scope.getres = function(id) { $scope.bookingreference = {}; $http.get('/api/carpooler/'+id) .success(function(data) { data.traveldate = new moment(data.traveldate).format("mmm yyyy"); data.traveltime = new moment(data.traveltime).format("h:mm:ss a"); $scope.bookingreference = data; }) .error(function(data) { console.log('error: ' + data); }); for(i = 0;i<$scope.bookings.length;i++) { dd = calcroute($scope.bookings[i].destination,$scope.bookingreference.destination); if( dd < 5000) {// 5 km $scope.bookingresultarray.push($scope.bookings[i]); } } $scope.status2 = true; }; i calling calcroute return distance.
var directionsservice = new google.maps.directionsservice(); function calcroute(ref1,ref2) { var start = string(ref1); var end = string(ref2); var args = { origin:start, destination:end, travelmode: google.maps.travelmode.driving } directionsservice.route(args, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); var myroute=directionsdisplay.directions.routes[0]; } else { alert("fail"); } }); var distance= 0; for(i = 0; < myroute.legs.length; i++){ distance += myroute.legs[i].distance.value; //for each 'leg'(route between 2 waypoints) distance , add total } return distance; }; i following error :
error: myroute not defined calcroute@http://localhost:3000/controllers/home.js:73:12 $scope.getres@http://localhost:3000/controllers/home.js:91:20 parser.prototype.functioncall/<@http://localhost:3000/vendor/angular.js:11026:15 ngeventhandler/</<@http://localhost:3000/vendor/angular.js:20468:17 $rootscopeprovider/this.$get</scope.prototype.$eval@http://localhost:3000/vendor/angular.js:12874:16 $rootscopeprovider/this.$get</scope.prototype.$apply@http://localhost:3000/vendor/angular.js:12972:18 ngeventhandler/<@http://localhost:3000/vendor/angular.js:20467:15 m.event.dispatch@https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:8497 m.event.add/r.handle@https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js:4:5235 the source google maps api
<script src="https://maps.googleapis.com/maps/api/js"></script> <script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> i cannot figure out why status not okay in directionsservice.route call [the alert "fail" 1 turn up]
am doing wrong? using angular think not issue.
you can't access myroute until exists (inside directionsservice callback function). there need use value:
function calcroute(ref1, ref2) { var start = string(ref1); var end = string(ref2); var args = { origin: start, destination: end, travelmode: google.maps.travelmode.driving } directionsservice.route(args, function (response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); var myroute = directionsdisplay.directions.routes[0]; var distance = 0; (i = 0; < myroute.legs.length; i++) { distance += myroute.legs[i].distance.value; //for each 'leg'(route between 2 waypoints) distance , add total } document.getelementbyid('distance').innerhtml = distance +" meters"; } else { alert("fail"); } }); }; code snippet:
var geocoder; var map; var directionsservice = new google.maps.directionsservice(); var directionsdisplay = new google.maps.directionsrenderer(); function initialize() { var map = new google.maps.map( document.getelementbyid("map_canvas"), { center: new google.maps.latlng(37.4419, -122.1419), zoom: 13, maptypeid: google.maps.maptypeid.roadmap }); var directionsservice = new google.maps.directionsservice(); directionsdisplay.setmap(map); calcroute("new york, ny", "baltimore, md"); } google.maps.event.adddomlistener(window, "load", initialize); function calcroute(ref1, ref2) { var start = string(ref1); var end = string(ref2); var args = { origin: start, destination: end, travelmode: google.maps.travelmode.driving } directionsservice.route(args, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); var myroute = directionsdisplay.directions.routes[0]; var distance = 0; (i = 0; < myroute.legs.length; i++) { distance += myroute.legs[i].distance.value; //for each 'leg'(route between 2 waypoints) distance , add total } document.getelementbyid('distance').innerhtml = distance + " meters"; } else { alert("fail"); } }); };html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="distance"></div> <div id="map_canvas" style="border: 2px solid #3872ac;"></div>
Comments
Post a Comment