GoogleMaps v3 autocomplete.getBounds() returns undefined after being set

Question

I'm having an issue trying to bias the results of an Google Maps autocomplete to the last pin placed on a map. I'm following the Google's tutorial here: https://developers.google.com/maps/documentation/javascript/places-autocomplete#change_search_area

My CoffeeScript code is as follows:

initSearch = ->
  autocomplete = new (google.maps.places.Autocomplete)(document.getElementById('location-query'), types: [ 'geocode' ])
  autocomplete.addListener 'place_changed', ->
    place = autocomplete.getPlace()
    addDestination(place, map, insertIndex) #places pin on map

    console.log 'autocomplete bounds (before): ' + autocomplete.getBounds()
    #setting bounds around new place
    biasCircle = new google.maps.Circle
      center: place.geometry.location
      radius: 500 #in kilometers

    autocomplete.setBounds(biasCircle.getBounds())
    console.log 'autocomplete bounds (after): ' + autocomplete.getBounds()

Which compiles into the following javascript:

initSearch = function() {
    var autocomplete;
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('location-query'), {
      types: ['geocode']
    });
    return autocomplete.addListener('place_changed', function() {
      var biasCircle;
      place = autocomplete.getPlace();
      addDestination(place, map, insertIndex);

      console.log('autocomplete bounds (before): ' + autocomplete.getBounds());
      biasCircle = new google.maps.Circle({
        center: place.geometry.location,
        radius: 500
      });
      autocomplete.setBounds(biasCircle.getBounds());
      return console.log('autocomplete bounds (after): ' + autocomplete.getBounds());
    });
  };

The pin is correctly placed on the map, but no matter how many places I add, the console.logs always return:

autocomplete bounds (before): undefined
autocomplete bounds (after): ((9.923577823579402, -84.09528446042509), (9.932560976420598, -84.08616473957488))

The bounds are correctly being set (as shown by the second console.log), but results aren't actually being biased and the first one always results in undefined.

The test case we are using to test if the results are being biased are: 1. Type 'San Jose' in autocomplete (top results should be in America) 2. Add 'Limon, Costa Rica' as a marker on the map 3. Type 'San Jose' in autocomplete, top result should be San Jose, COSTA RICA

We thought it might be an issue of scoping, so we tried window.autocomplete everywhere and still had the same issue. We also tried setting the autocomplete bounds in a separate method (instead of the place_changed event, but this also didn't work).

Thank you in advance for your help!

Update: Trying Cedric's Answer On Cedric's advice, I'm trying to set the bounds outside of the listener callback (method is called from within listener), but I'm still getting the same issue. New code:

#Sets autocomplete bias
setAutocompleteBias = (place) ->
  console.log 'autocomplete bounds (before): ' + window.autocomplete.getBounds()
  #setting bounds around new place
  biasCircle = new google.maps.Circle
    center: place.geometry.location
    radius: 500 #in kilometers

  window.autocomplete.setBounds(biasCircle.getBounds())
  console.log 'autocomplete bounds (after): ' + window.autocomplete.getBounds()

window.autocomplete = null
#Autocomplete search box initialization
initSearch = ->
  window.autocomplete = new (google.maps.places.Autocomplete)(document.getElementById('location-query'), types: [ 'geocode' ])
  #autocomplete.bindTo('bounds', map)
  window.autocomplete.addListener 'place_changed', ->
    place = window.autocomplete.getPlace()

    addDestination(place, map, insertIndex)

    setAutocompleteBias(place)

Answer 1

It appear your autocomplete lacks required initialization of bounds either from the map

initSearch = ->
  autocomplete = new (google.maps.places.Autocomplete(                  
    document.getElementById('location-query'), types: [ 'geocode' ])
  autocomplete.bindTo('bounds', map)
  autocomplete.addListener 'place_changed', ->
    place = autocomplete.getPlace()
    addDestination(place, map, insertIndex) #places pin on map

    console.log 'autocomplete bounds (before): ' + autocomplete.getBounds()
    #setting bounds around new place
    biasCircle = new google.maps.Circle
      center: place.geometry.location
      radius: 500 #in kilometers
    autocomplete.setBounds(biasCircle.getBounds())
    console.log 'autocomplete bounds (after): ' + autocomplete.getBounds()

or via a specific location

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};
autocomplete = new google.maps.places.Autocomplete(input, options);

Link from your tutorial https://developers.google.com/maps/documentation/javascript/places-autocomplete#add_autocomplete

Link from documentation https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete