How to select mode in Google map via radio buttons instead of dropdown?

Question

I currently have an application which routes the user between current location and a set destination. The user can alternate between 2 travel modes (driving/transit) - using a dropdown selection.

I want to change how the user selects the travel mode from a dropdown to radio buttons instead. However, unsure as to how I can alter my javascript & I have searched for a way to do so with no luck.

HTML for radio buttons & existing(working) select dropdown:

<div class="switch">

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

<input name="radio" type="radio" value="TRANSIT" id="optiontwo">
<label for="changemode-train" class="right">Train</label>

<span aria-hidden="true"></span>

</div>


//BELOW IS CURRENT METHOD OF HOW USER CHANGES TRAVEL MODE
<div id="floating-panel">
<b>Mode of Travel: </b>
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="TRANSIT">Transit</option>
</select>
</div>

Javascript:

<script> 
  function initMap() {
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;

    var lattp = <?php echo json_encode($lattp);?>;
    var lngtp = <?php echo json_encode($lngtp);?>;
    var zoomtp = <?php echo json_encode($zoomtp);?>;
    var tp = {lat: JSON.parse(lattp), lng: JSON.parse(lngtp)};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: tp
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('right-panel'));

     if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
     document.getElementById('mode').addEventListener('change', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay, pos);
    });
      calculateAndDisplayRoute(directionsService, directionsDisplay, pos);

    }, function() {
      handleLocationError(true, markerme);
    });
 } else {
  // Browser doesn't support Geolocation
  window.alert('Geolocation is not supported');
 } 
 }

  function calculateAndDisplayRoute(directionsService, directionsDisplay, pos) {
    var selectedMode = document.getElementById('mode').value;
    directionsService.route({
      origin: pos,  // Haight.
      destination: {lat: 50.796358,lng: -1.063816},  // Ocean Beach.
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
       travelMode: google.maps.TravelMode[selectedMode],
       transitOptions: {
       modes: ['RAIL'],
       arrivalTime: new Date(1489242600000),
       routingPreference: 'FEWER_TRANSFERS'
    },
        unitSystem: google.maps.UnitSystem.IMPERIAL,
         provideRouteAlternatives: true
    }, function(response, status) {

      if (status == 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

Answer 1

Try this code. There is a way to assign a listeners to the radio:

document.getElementsByName('radio').forEach(function(el){
el.addEventListener('click', function() {
      alert($(this).val())
    });

})

And a way how to get value:

var selectedMode = "";
    var radios = document.getElementsByName('radio')
    radios.forEach(function(element) {
        if(element.checked){
            selectedMode = element.value;
        }
    })

Please note if you'll use jQuery it could be simpler: Anyway there working code is like this;

<script> 
  function initMap() {
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;

    var lattp = <?php echo json_encode($lattp);?>;
    var lngtp = <?php echo json_encode($lngtp);?>;
    var zoomtp = <?php echo json_encode($zoomtp);?>;
    var tp = {lat: JSON.parse(lattp), lng: JSON.parse(lngtp)};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: tp
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('right-panel'));

     if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      document.getElementsByName('radio').forEach(function(el){
        el.addEventListener('click', function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay, pos);
        });

    })

      calculateAndDisplayRoute(directionsService, directionsDisplay, pos);

    }, function() {
      handleLocationError(true, markerme);
    });
 } else {
  // Browser doesn't support Geolocation
  window.alert('Geolocation is not supported');
 } 
 }

  function calculateAndDisplayRoute(directionsService, directionsDisplay, pos) {
    //var selectedMode = document.getElementById('mode').value;
    var selectedMode = "";
    var radios = document.getElementsByName('radio')
    radios.forEach(function(element) {
        if(element.checked){
            selectedMode = element.value;
        }
    })

    directionsService.route({
      origin: pos,  // Haight.
      destination: {lat: 50.796358,lng: -1.063816},  // Ocean Beach.
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
       travelMode: google.maps.TravelMode[selectedMode],
       transitOptions: {
       modes: ['RAIL'],
       arrivalTime: new Date(1489242600000),
       routingPreference: 'FEWER_TRANSFERS'
    },
        unitSystem: google.maps.UnitSystem.IMPERIAL,
         provideRouteAlternatives: true
    }, function(response, status) {

      if (status == 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }