Question

i’m kinda noobish when it comes to javascript. I have a Google maps simple script for routing directions from A to B. It all works well, except i would like to change the mode (driving, walking…) from currect drop down selector to radio buttons.

I’ve searched on the net and stackoverflow, but currently did not find a working solution for this.

My html:

<select id="mode">
     <option selected="selected" value="DRIVING">Car</option>
     <option value="WALKING">Walk</option>
     <option value="TRANSIT">Public transport</option>
     <option value="BICYCLING">Bike</option>
</select>

and script:

function calcRoute() {
var selectedMode = document.getElementById('mode').value;
var start = document.getElementById("routeStart").value;
var end = document.getElementById("routeEnd").value;
var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode[selectedMode]
};

Is it possible to change select (dropdown) to be radio buttons from the code above or should i post something else also?

p.s.
I’ve also tried this solution, but when i submit Calculate route it just redirects me to a blank subpage /mode?.

Thanks 🙂

Answer 1

I hope you are talking about Radio Buttons instead of Checkbox as multiple checkboxes can be selected which will not work as expected. Radio buttons come in groups which have the same name and different ids, one of them will have the checked property set to true, so loop over them until you find it.

Create a new function to find radio button which is checked and then replace
var selectedMode = document.getElementById(‘mode’).value; with the code given below:

function getCheckedRadio(radio_group) {
    for (var i = 0; i < radio_group.length; i++) {
        var button = radio_group[i];
        if (button.checked) {
            return button;
        }
    }
    return undefined;
}

var selectedMode = getCheckedRadio(document.forms.frmId.elements.groupName).value;