在我的网页上使用Google Map API在附近添加下拉列表

Question

我需要根据另一个下拉列表在下拉列表附近添加位置。.我已经编写了js代码，以便从第一个下拉列表中获取经度和纬度。在网上进行了大量搜索，但是我没有得到正确的答案

这是我的html代码：-

<div class="form-group">
                <label>District</label>

                <select id="district" class="form-control" onchange="getLatLng()">
                <option id="" selected='selected' style="display:none;"><label id=""></label> </option>

                <option>Thrissur</option>
                <option>Kozhikode </option>
                <option>Palakkad </option>

                </select>
            </div>
            <div class="form-group">
            <label>City</label>

       <input type="text" list="hosting-plan" id="city" class="form-control">
                <datalist id="hosting-plan">
                    <option id="citylist"/>
                    <option value="small"/>
                    <option value="medium"/>
                    <option value="large"/>
                </datalist>

            </div>

和JS代码：-

function getLatLng(){
    var p = document.getElementById("district");
    var address = p.options[p.selectedIndex].value; 
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();
    alert(latitude);
    alert(longitude);

  } 

}）；     }