I'm trying to implement a custom UI for the google places autoplete as the prebuilt one doesn't allow me to manually select results. Everything works when not using multiple types in the getPlacePredictions function options but when I use ['(regions)', '(cities)'] the status returns 'invalid request'

Am I doing something wrong or is it not possible to return multiple types?

var _this = this;

this.input = $('#zipcode_autoplete');

this.service = new google.maps.places.AutopleteService();

this.input.on('input', function() {
  return _this.service.getPlacePredictions({
    input: _this.input.val(),
    types: ['(regions)', '(cities)'],
    ponentRestrictions: {
      country: 'us'
    }
  }, _this.callback);
});

this.callback = function(predictions, status) {
  var i, prediction, _results;
  console.log(predictions);
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    alert(status);
    return;
  }
  i = 0;
  prediction = void 0;
  this.results = $('ul.location_results').removeClass('hidden').html('');
  _results = [];
  while (prediction = predictions[i]) {
    this.results.append("<li><span class='location-address'>" + prediction.terms[0].value + "</span><span class='location-state'>" + prediction.terms[prediction.terms.length - 2].value + "</span></li>");
    _results.push(i++);
  }
  return _results;
};

I'm trying to implement a custom UI for the google places autoplete as the prebuilt one doesn't allow me to manually select results. Everything works when not using multiple types in the getPlacePredictions function options but when I use ['(regions)', '(cities)'] the status returns 'invalid request'

Am I doing something wrong or is it not possible to return multiple types?

var _this = this;

this.input = $('#zipcode_autoplete');

this.service = new google.maps.places.AutopleteService();

this.input.on('input', function() {
  return _this.service.getPlacePredictions({
    input: _this.input.val(),
    types: ['(regions)', '(cities)'],
    ponentRestrictions: {
      country: 'us'
    }
  }, _this.callback);
});

this.callback = function(predictions, status) {
  var i, prediction, _results;
  console.log(predictions);
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    alert(status);
    return;
  }
  i = 0;
  prediction = void 0;
  this.results = $('ul.location_results').removeClass('hidden').html('');
  _results = [];
  while (prediction = predictions[i]) {
    this.results.append("<li><span class='location-address'>" + prediction.terms[0].value + "</span><span class='location-state'>" + prediction.terms[prediction.terms.length - 2].value + "</span></li>");
    _results.push(i++);
  }
  return _results;
};

• javascript
• jquery
• google-maps
• google-maps-api-3

• According to the API 'In general only a single type is allowed'. – Andy Commented Jan 15, 2014 at 14:20
• Ok, that's frustrating, thanks for pointing me to the page, I couldn't find it anywhere. @Andy if you want to post that as an answer I'll accept it – joewoodward Commented Jan 15, 2014 at 14:25
• done. Added a little more info in there too. – Andy Commented Jan 15, 2014 at 15:13

1 Answer 1

According to the API 'In general only a single type is allowed'.

If you were to try to get both types individually what you could do is use a deferred object to manage the process, something like this:

// set a new promises array, set the types array
var promises = [], types = ['(regions)', '(cities)'];

// loop over the types and push the output of getPredications() for each one
// into the promises array
for (var i = 0, l = types.length; i < l; i++) {
  promises.push(getPredictions(types[i]));
}

// when all promises have pleted then do something
// This uses jQuery's when method which can take an array of
// promises when used with apply
$.when.apply(null, promises).then(runThisFunction);

function getPredictions(type) {

  // Set up a new deferred object
  var deferred = new $.Deferred();

  // Call the asynchronous function to get the place predictions
  this.service.getPlacePredictions({
    input: _this.input.val(),
    types: type,
    ponentRestrictions: {
      country: 'us'
    }
  }, function (data) {

    // Once the data has been returned perhaps do something with data
    // but definitely resolve the deferred object.       
    deferred.resolve();
  });

  // return the promise
  return deferred.promise();
}