53645

Google Maps API v3: routeIndex Not Working?

I'm using the Google Maps API v3 and am trying to provide a "Show Next Route" button, where a user can cycle through all available routes.

I've got it displaying the first route, but when I use the routeIndex property of the DirectionsRenderer class, it only returns the first route.

Am I doing something wrong? Code pasted below. The test route I've been using has a total of three routes. If I set the routeIndex property to 1, it still displays the first route in the array (basically, routeIndex[0]).

function showDirections() { // show contact buttons $(".contact-route-button").css({display:"block"}); // add 1 to count count++; // If this function has been run before, clear the directions if(count > 1){ // Clear map directionsDisplay.setMap(null); //Clear Route List document.getElementById('directions').innerHTML = ""; } // Set map to render directions directionsDisplay = new google.maps.DirectionsRenderer({ map: map, /*preserveViewport: true,*/ draggable: true, routeIndex: 1 }); // Remove hidden class form text explaning driving directions $('#drive-text').fadeIn("fast").removeClass('hidden'); // Hide paragraph under directions form $(".section.grids-two.maximum-780.clearfix .grid.grid-2").fadeOut("fast"); // SlideToggle panel about random fact $(".random-fact").slideDown("fast").css({display:"block"}); // Set Panel that will display driving directions directionsDisplay.setPanel(document.getElementById('directions')); // Get address input text var address = document.getElementById('dir-address').value; // Create request to send to Google starting at the address provided var request = { origin: address, destination: '531 E Market Street Indianapolis, IN 46204', travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.STANDARD, provideRouteAlternatives: true }; // Send request and display on map and directions box directionsService.route(request, function(response, status) { if (status === google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); totalRoutes = countRoutes(response); } }); }

Any ideas? The instructions I'm following are on the Google Maps API documentation, https://developers.google.com/maps/documentation/javascript/reference#DirectionsRendererOptions

Thanks in advance!!

Answer1:

It appears that the routeIndex does only have an effect when the directions-property is available in the directionsRenderer. You may use:

directionsDisplay.setOptions({directions:response,routeIndex:1});

...what will set both, directions and routeIndex

Recommend

  • Can you display multiple maps on the same page with directions using Google Maps JavaScript API v3?
  • Google Map API V3. Unable to create custom polyline for TRANSIT directions
  • how to load map marker automatically when page loaded in ionic 2?
  • Uncaught exception when calling Google maps directionsService
  • Google Maps v3 directionsRenderer.setMap(null) not working to clear previous directions
  • How do you change the color of the dotted line on returned Google map directions
  • Interactive legend in Google Maps API V3 with two or more KML layers
  • Display Custom Marker in Google Maps Using Relative File Path [duplicate]
  • Responsive left sidebar open close
  • Prevent page break in text block with iText, XMLWorker
  • C++ friend class std::vector
  • SyntaxError: (irb):26: both block arg and actual block given
  • Using Sax parsing to edit and write XML in VB6
  • Assign variable to the value in HTML
  • How to use carriage return with multiple line?
  • Django: Count of Group Elements
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • script to move all files from one location to another location
  • Sending data from AppleScript to FileMaker records
  • MySQL WHERE-condition in procedure ignored
  • Perl system calls when running as another user using sudo
  • Linker errors when using intrinsic function via function pointer
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • JTable with a ScrollPane misbehaving
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • Turn off referential integrity in Derby? is it possible?
  • LevelDB C iterator
  • Add sale price programmatically to product variations
  • Running Map reduces the dimensions of the matrices
  • Observable and ngFor in Angular 2
  • How can i traverse a binary tree from right to left in java?
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Android Heatmap on canvas or ImageView
  • Conditional In-Line CSS for IE and Others?
  • How do I use LINQ to get all the Items that have a particular SubItem?