Javascript - Pass a value from dropdown box to Google Maps API

Question

I am creating a quote form for a taxi firm using Google Maps API. Currently, the user enters a start point and a pick up point into 2 text boxes and the API calculates the distance between the two points and the cost of the journey.

I am trying to add two dropdown boxes with set locations so that the user can either select one of these locations or use the text boxes to input the data. The code will then determine which value has been input and use that value accordingly for calculating the location. I'm struggling to do this final bit. I can't work out the best way to do this. I have been trying to pass the value from the dropdown box to the text input box, as if the text input box had been filled manually. I still think this is the best way, but just can't seem to implement it.

My code is as follows:

Javascript

var geocoder, map, location1, location2, gDir;

    function initialize() {
    geocoder = new GClientGeocoder();
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(54.019066,-1.381531),9); // change these if necessary
    map.addControl(new GSmallMapControl());
    gDir = new GDirections(map);
    GEvent.addListener(gDir, "load", function() {

        var drivingDistanceMiles = Math.ceil(gDir.getDistance().meters / 1609.344);

        if(drivingDistanceMiles <= 70)
            {
            var drivingDistanceMilesCost = (drivingDistanceMiles) * 1.75;
            }
        else (drivingDistanceMiles >= 70)
            {
         var drivingDistanceMilesCost =(drivingDistanceMiles) * 1.2;
            }




        document.getElementById('resultsa').innerHTML = '<strong>From: </strong>' + location1.address + '<br /> ';
        document.getElementById('resultsb').innerHTML = '<strong>To: </strong>' + location2.address + ' <br />' ;

        document.getElementById('addfrom').innerHTML = document.getElementById('resultsa').innerHTML;
        document.getElementById('addfrom').value = document.getElementById('resultsa').innerHTML;
        document.getElementById('addto').innerHTML = document.getElementById('resultsb').innerHTML;
        document.getElementById('addto').value = document.getElementById('resultsb').innerHTML;

        document.getElementById('price').innerHTML =  drivingDistanceMilesCost.toFixed(2);
        document.getElementById('price2').innerHTML = document.getElementById('price').innerHTML;
        document.getElementById('price2').value = document.getElementById('price').innerHTML;


        });
}

function showLocation() {
if(document.getElementById('quote').innerHTML!='') { // need to wait for the result from gmaps
document.forms[0].onsubmit = null;
document.forms[0].action = '#';
document.getElementById('GMsubmit').style.display = 'none';
document.getElementById('CBsubmit').style.display = '';
}
    geocoder.getLocations(document.forms[0].address1.value, function (response) {
        if (!response || response.Status.code != 200)
        {
            alert("Sorry, please enter a valid postcode");
        }
        else
        {
            location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
            geocoder.getLocations(document.forms[0].address2.value, function (response) {
                if (!response || response.Status.code != 200)
                {
                    alert("Sorry, please enter a valid postcode");
                }
                else
                {
                    location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                    gDir.load('from: ' + location1.address + ' to: ' + location2.address);

                }
            });
        }
    });
}

HTML

<form onSubmit="this.address1.value+='&nbsp;UK';this.address2.value+='&nbsp;UK'; showLocation();  return false;" action="#" id="quote">


    <div style="width: 317px;" class="style3">
        <table style="width: 237%;">
            <tbody><tr> 
                <td style="width: 268px;" class="style5">   
                <p class="style5">
                <p id="instruct">Pick Up point</p>
    <p>Select a location or enter your address:</p>
    <select name="startapt">
      <option value=""></option>
<option value="MAN">Manchester Airport</option>
<option value="LBA">Leeds Bradford Airport</option>
<option value="NCL">Newcastle Airport</option>
<option value="MME">Durham Tees Valley Airport</option>
<option value="53.966296,-1.115512">Leeds Railway Station</option>
<option value="53.909677,-1.17926">York Railway Station</option>
    </select><br /><br />
        <input type="text" style="width: 272px;" value="From" onFocus="this.value=''" name="address1">

        </p>
    <p id="resultsa">&nbsp;

        </p><p>
        <p id="instruct">Destination</p>
    <p>Select a destination or enter your address:</p>
    <select name="endapt">
      <option value=""></option>
<option value="MAN">Manchester Airport</option>
<option value="LBA">Leeds Bradford Airport</option>
<option value="NCL">Newcastle Airport</option>
<option value="MME">Durham Tees Valley Airport</option>
<option value="53.966296,-1.115512">Leeds Railway Station</option>
<option value="53.909677,-1.17926">York Railway Station</option>
    </select><br /><br />
        <input type="text" size="20" style="width: 272px;" value="To" onFocus="this.value=''" name="address2"></p><p id="resultsb">&nbsp;
                </p>
        <button style="display: none;" type="submit" id="CBsubmit">confirm &amp; book</button>

                    <p id="results">&nbsp;</p>
                    <p> Estimated Cost of Journey:</p>
 <p id="price">
        <input type="submit" value="Calculate Price" style="border: 1px solid rgb(0, 0, 0); width: 178px;" id="GMsubmit"></p>  <p id="results3"></p>    <input type="hidden" id="price2" name="price2"><input type="hidden" id="addfrom" name="addfrom"><input type="hidden" id="addto" name="addto">               </td>
                <td>    
 <div class="style4" style="width: 500px; height: 500px; position: relative; background-color: rgb(229, 227, 223);" id="map_canvas"></div>

                </td>
            </tr>
        </tbody></table>


    </div>

Thanks in advance for help.

Answer 1

One solution would be to check the value of Address1 and Address2 before you manipulate any data in JS. Pseudocode below:

if (address1.value == '') { 
    address1.value = startapt.options[startapt.selectedIndex].text 
}
if (address2.value == '') { 
    address2.value = endapt.options[endapt.selectedIndex].text 
}

Then continue with the code you've already written.