javascript - Google Maps directions mvcobject getting a individual step -
i using directionsservice directions via google maps javascript api. issue want individual steps , yet have them part of mvc object when click on them render on map default
directionsdisplay.setdirections(response);
does. code:
var directionsservice = new google.maps.directionsservice(); directionsdisplay.setmap(map); var request = { origin : a, destination : b, travelmode : google.maps.directionstravelmode.driving }; directionsservice.route(request, function(response, status) { if (status == google.maps.directionsstatus.ok) { directionsdisplay.setdirections(response); //instead of setting directions panel want //set 1 panel , yet have link //map above does. }});
the idea must iterate on each leg of route, on each step in leg , render own html represent it. see following code (assumes have map
, directionsdisplay
, , directionsservice
, , request
defined):
directionsservice.route(request, function(response, status) { // make sure directions request valid if (status == google.maps.directionsstatus.ok) { // give response directions display directionsdisplay.setdirections(response); // display route on map directionsdisplay.setmap(map); // grab result routes var routeresult = response.routes[0]; // iterate on each leg of route routeresult.legs.foreach(function(leg) { // build html each step var stephtml = ''; leg.steps.foreach(function(step) { stephtml += '<div class="directionstep">'+ '<div>'+step.instructions+'</div>'+ '<div class="grey">'+step.distance.text+' ('+step.duration.text+')'+'</div>'+ '</div>'; }); // put step html somewhere $('.steps').append(stephtml); }); } });
then, listen clicks on individual steps , whatever need in response.
Comments
Post a Comment