How to make the direction text panel to detect the travel mode?

Question

So I am working on the direction service using Google Map API. The site works fine with the autocomplete service and I am trying to add the text panel telling users how to get to the destination using 'transit', 'walking', and 'driving' mode.

https://jsfiddle.net/QPX321/yo4tbh58/

what to do is to have the text giving routing information based on the travel mode users select. say if I select 'transit' it shows me the bus that I have to take.

so I know something is wrong with my code in the function below.

function calculateAndDisplayRoute(directionsService, 
directionsDisplay) {
    var start = document.getElementById('origin-input').value;
    var end = document.getElementById('destination-input').value;
      var modeSelector = document.getElementById('mode-selector');

    directionsService.route({
      origin: start,
      destination: end,
      travelMode: modeSelector,
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

the code works fine when I change

travelMode: modeSelector,

to

travelMode: 'WALKING', or
travelMode: 'DRIVING',  or 
travelMode: 'DRIVING',

but this will only give one option and it forcibly change my travel mode to one specific mode. How should I code it so the text panel is able to detect my travel mode, hence giving my the appropriate suggestion？

i think the problem is that I did not link my travel mode to the function? I use the code below to set my travel mode,

var modeSelector = document.getElementById('mode-selector');

and thought the code below would be able to detect my travel mode

travelMode: modeSelector,

but it did not work when I use these code.

I would expect the text panel to show direction in the travel mode that I click. If I click driving mode, it should give me direction on how to drive from point A to point B. The code does not give me any text unless I change the travelMode: to a specific mode ('driving', 'transit', or 'walking').

Thank you in advance for you help and precious time.

Regards,

Darren G · Answer 1 · 2019-09-04T17:51:16.327

-1

First you need to add value attributes to your radio input tags in your HTML:

<input type="radio" name="type" id="changemode-walking" checked="checked" value='WALKING'>
<label for="changemode-walking">Walking</label>

<input type="radio" name="type" id="changemode-transit" value='TRANSIT'>
<label for="changemode-transit">Transit</label>

<input type="radio" name="type" id="changemode-driving" value='DRIVING'>
<label for="changemode-driving">Driving</label>

Then you need to check which of the radio inputs is checked and get the value for it. You can do that in a for loop (as per this answer):

var radios = document.getElementsByName('type');

for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    var modeSelector = radios[i].value;
    break;
  }
}

Now modeSelector contains the text from the value attribute of the checked radio button.

Here is a link to a working version of your JSfiddle.

edited Sep 04 '19 at 17:51

answered Sep 03 '19 at 05:04

Darren G

780
8
16

hi, Darren G. Thank you for your reply. I added the .value to the end and it is still not working. no text will show in this case, it only shows text if I have the travelmode defined as 'transit', 'driving', or 'walking'. another thing I noticed is that I do not have a floating panel as it is replaced by the autocomplete direction service. so line 129 in the script ( var control = document.getElementById('floating-panel'); ) probably does not work. not sure if this will affect anything. – MAGGIE PENG Sep 04 '19 at 04:08
Apologies, I'd answered too quickly. Have changed the answer and got your jsfiddle working. – Darren G Sep 04 '19 at 17:52
I really appreciate your help, the text shows up. How do you refresh the panel? I noticed the text did not change if I changed the radio button. For example, If I typed it the 'to' and 'from' and the mode is in 'transit', it shows me how to get there in transit mode. But the text remains the same if I try to change it to 'walking' mode, I won't show the how walk to my destination. – MAGGIE PENG Sep 05 '19 at 04:15
I also notice that the very first travel route does not disappear even if I change my travel mode to other. say if I select 'walking' mode first, It shows me the walking route. when I select 'transit', then I will have both of the transit and walking route – MAGGIE PENG Sep 05 '19 at 04:25

How to make the direction text panel to detect the travel mode?

1 Answers1