根据城市自动完成区域

Question

我有下拉城市列表，我想使用谷歌地图逐个城市搜索。例如，我从下拉列表中选择了孟买市，而不是仅仅想搜索孟买的地方。

我的HTML是：

<div class="form-group">
                    <label class="sr-only" for="selectcity">Cities</label>
                    <select class="form-control" name="city" id="selectcity">
                                                                    <option value="Ghaziabad">Ghaziabad</option>
                                              <option value="Noida">Noida</option>
                                              <option value="Gurgaon">Gurgaon</option>
                                              <option value="Faridabad">Faridabad</option>
                                              <option value="New Delhi">New Delhi</option>
                                              <option value="Greater Noida">Greater Noida</option>
                                          </select>
                  </div>

<div class="form-group">
                    <label class="sr-only">Location</label>
                    <input type="text" name="address" placeholder="Type area Eg. sector 62 noida" id="autocomplete" onfocus="geolocate()" class="form-control searchIcon w-m-d" autocomplete="off">
                    <span class="errorDiv" style="display:none;">
                      <i class="fa fa-warning"></i> Location is not in selected city
                    </span>
                  </div>

我的js是：

function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

和

function initialize() {

  autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), { types: ['geocode'], componentRestrictions: {country: "in", regions: 'ghaziabad'} });


  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    var location=place.geometry.location;

    document.getElementById('lat').value=location.lat();
    document.getElementById('lng').value=location.lng();

    getAddress(location);
  });

  function getAddress(latLng) {
    geocoder.geocode( {'latLng': latLng},
      function(results, status) {
        if(status == google.maps.GeocoderStatus.OK) {
          console.log(results);
          if(results[0]) {
            // document.getElementById("autocomplete").value = results[0].formatted_address;
            $.each(results[0].address_components, function(i,v) {
              if ( v.types[0] == "administrative_area_level_1" || v.types[0] == "administrative_area_level_2" ) {
                $('#state').val(v.long_name);
              } else if ( v.types[0] == "country") {
                $('#country').val(v.long_name);
              }else if(v.types[0]=="locality"){
                $('#city1').val(v.long_name);
              }  else if(v.types[0]=="postal_code"){
                $('#postal_code').val(v.long_name);
              }
            });
          } else {
            document.getElementById("autocomplete").value = "No results";
          }
        } else {
          document.getElementById("autocomplete").value = status;
        }
    });
  }
}

请帮帮我。提前谢谢。