Javascript - передать значение из выпадающего списка в Google Maps API

Question

Я создаю форму цитаты для компании такси, используя Google Maps API. В настоящее время пользователь вводит начальную точку и точку сбора в 2 текстовых поля, и API вычисляет расстояние между двумя точками и стоимость поездки.

Я пытаюсь добавить два раскрывающихся списка с заданными местоположениями, чтобы пользователь мог выбрать одно из этих мест или использовать текстовые поля для ввода данных. Затем код будет определять, какое значение было введено, и использовать его соответствующим образом для расчета местоположения. Я изо всех сил пытаюсь сделать этот последний бит. Я не могу найти лучший способ сделать это. Я пытался передать значение из выпадающего списка в поле ввода текста, как будто поле ввода текста было заполнено вручную. Я все еще думаю, что это лучший способ, но просто не могу его реализовать.

Мой код выглядит следующим образом:

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>

Заранее спасибо за помощь.

Answer 1

Одним из решений было бы проверить значение Address1 и Address2, прежде чем манипулировать какими-либо данными в JS. Псевдокод ниже:

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

Затем продолжите с кодом, который вы уже написали.