title: How to set bounds for Google Places Autocomplete using drop down
body: <p>I'm using the Google Places API in my application and was able to set the bounds for Autocomplete with a dropdown for only my first choice (New York City). I would like to be able to set it for my other cities in the drop down so that when a user changes from NYC to Chicago - the autocomplete only registers results from Chicago. Right now, when I select Chicago - the console.log registers Chicago LatLng but the autocomplete only shows NYC results. I have listed my code below and greatly appreciate any help with this. I have a feeling it needs an event listener to pass along the changes but all my efforts have not yet been successful.</p>
  
  <p><strong>Autocomplete.js</strong></p>
  
  <pre><code> var map, places, infoWindow;
    var markers = [];
    var autocomplete;      
    ;
  
     function cafeInitMap(lat, lng,latnorth, lngeast, store) {
      map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(40.751,-73.99),
        zoom: 11,          
        mapTypeControl: false,
        panControl: false,
        zoomControl: false,
        streetViewControl: false
      });
  
      infoWindow = new google.maps.InfoWindow({
        content: document.getElementById('info-content')
      });
  
      var defaultBounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(lat, lng),
                new google.maps.LatLng(latnorth, lngeast));
  
      // Create the autocomplete object and associate it with the UI input control.
      // Restrict the search to the default country, and to place type "cities".
      autocomplete = new google.maps.places.Autocomplete(
          /** @type {!HTMLInputElement} */ (
              document.getElementById('autocomplete')), {
                  bounds: defaultBounds,
                  strictBounds: true
          });
      places = new google.maps.places.PlacesService(map);
  }
  $(document).ready(function() {
    $("#cafe_city_id").on('change', hanldeGoogleMapDraw);
    function hanldeGoogleMapDraw(e) {
  var $place = $("#cafe_city_id"),
  
      lat,
      latnorth,
      searchType = '',
      lng,
      lngeast;
  
  if($place.find(':selected').length === 0) return;   
  
  lat = $place.find(':selected').data('south');
  lng = $place.find(':selected').data('west');    
  latnorth = $place.find(':selected').data('north');
  lngeast = $place.find(':selected').data('east');
  $('#search-results-dropdown').html('');
  cafeInitMap(lat, lng,latnorth, lngeast);
  }
  });
  </code></pre>
  
  <p><strong>Automcomplete.html.erb</strong></p>
  
  <pre><code>  &lt;div class="col-md-6"&gt;
  &lt;div class="field"&gt;
  &lt;%= f.label :city %&gt;&lt;br&gt;
  &lt;select class="form-control" name="cafe[city_id]" id="cafe_city_id"&gt;
      &lt;option&gt;&lt;/option&gt;
      &lt;% City.all.each do |city| %&gt;
          &lt;option value="&lt;%= city.id %&gt;" data-south="&lt;%= city.latitude %&gt;" data-west="&lt;%= city.longitude %&gt;" data-north="&lt;%= city.latitudenorth  %&gt;" data-east="&lt;%= city.longitudeeast %&gt;" &gt;    &lt;%= city.name %&gt;&lt;/option&gt;
      &lt;% end %&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-6"&gt;   
     &lt;div id="locationField"&gt;
    &lt;input id="autocomplete" placeholder="Type a Location" type="text" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Seeds.rb</strong></p>
  
  <pre><code>City.destroy_all
  nyc = City.create!(name:"New York City", latitude: 40.495992, longitude: -74.029988, latitudenorth: 40.915568, longitudeeast: -73.699215)
  sf = City.create!(name:"San Francisco", latitude: 37.7749295, longitude: -122.4194, latitudenorth: 37.7152613, longitudeeast: -122.5206928)
  austin = City.create!(name:"Austin", latitude: 30.267153, longitude: -97.7430608, latitudenorth: 30.3074624, longitudeeast: -98.0335911)
  la = City.create!(name:"Los Angeles", latitude: 34.0522342, longitude: -118.2436849, latitudenorth: 34.0201613, longitudeeast: -118.6919205)
  </code></pre>