Google Maps API - AutoFill Predictions for US Only

Question

I use the Google Maps API called Retrieve Autocomplete Predictions . And I can’t figure out how to filter it so that it only returns places in the USA. I see how I could do this with other examples ...

var input = document.getElementById('searchTextField'); var options = { types: ['(cities)'], componentRestrictions: {country: 'us'} }; autocomplete = new google.maps.places.Autocomplete(input, options); 

But I can’t figure out how to apply it to my example. Here is my code ...

 function GetAddressPredictions(Search) { var displaySuggestions = function (predictions, status) { if (status != google.maps.places.PlacesServiceStatus.OK) { return; } predictions.forEach(function (prediction) { PredictionArray.push(prediction); }); }; var service = new google.maps.places.AutocompleteService(); service.getQueryPredictions({input: Search}, displaySuggestions); } 

I tried this, but it did not work.

 function GetAddressPredictions(Search) { var displaySuggestions = function (predictions, status) { if (status != google.maps.places.PlacesServiceStatus.OK) { return; } predictions.forEach(function (prediction) { PredictionArray.push(prediction); }); }; var options = { types: ['(cities)'], componentRestrictions: {country: 'us'} }; var service = new google.maps.places.AutocompleteService(); service.getQueryPredictions({input: Search, options}, displaySuggestions); } 

Any ideas? Thanks.

Answer 1

You are so close, but unfortunately for this particular behavior you need to use getPlacePredictions() instead of getQueryPredictions() . This allows you to use an AutocompletionRequest , which has componentRestrictions however QueryAutocompletionRequest does not support componetRestictions , and you should return to using bounds to limit the search to a field or location , to avoid searching, to prefer locations near the point.

Here is the solution with getPlacePredictions() :

  var service = new google.maps.places.AutocompleteService(); var options = { input: Search, types: ['(cities)'], componentRestrictions: {country: 'us'} }; service.getPlacePredictions(options , displaySuggestions); 

You can add location or bounds as keys to the options object if you have to do this with getQueryPredictions()

Answer 2

The getQueryPredictions function takes the QueryAutocompletionRequest as its parameter, and the QueryAutocompletionRequest does not have a property to restrict it to a specific country.

However, you can simply add "United States" or "usa" to the request before submitting:

 service.getQueryPredictions({ input: 'pizza near Syd' + ' usa' }, displaySuggestions); 

If you do not want ", USA" to appear in the returned results, you can remove it using the JavaScript replace function:

 predictions.forEach(function(prediction) { var li = document.createElement('li'); li.appendChild(document.createTextNode(prediction.description.replace(', USA', ''))); document.getElementById('results').appendChild(li); }); 

Demo: https://jsfiddle.net/sdz4yssL/2/

Also note that if there is a risk for search terms, including the United States or their variations, then first you need to remove all occurrences from the search terms (usually using a regular expression to ignore case sensitivity), otherwise search for something like "pizza usa usa" will not return any results:

 input: (' ' + 'pizza near us Syd usa United States US' + ' ').replace(/ usa /ig,' ').replace(/ US /ig,' ').replace(/ united states /ig,' ') + ' usa' 

(I added a space before and after the request so that the replacement functions still match at the beginning and at the very end)

Answer 3

Have you tried something like this:

 function GetAddressPredictions(Search) { var displaySuggestions = function(predictions, status) { if (status != google.maps.places.PlacesServiceStatus.OK) { return; } predictions.forEach(function(prediction) { PredictionArray.push(prediction); }); }; var service = new google.maps.places.AutocompleteService(); service.getQueryPredictions({ input: Search, types: ['(cities)'], componentRestrictions: {country: 'us'} }, displaySuggestions); } 

Answer 4

Unlike above, AutocompleteService accepts Eater QueryAutocompletionRequest OR AutocompletionRequest , so I think the way you pass your options is wrong. It is not simple:

 var options = { input: Search, types: ['(cities)'], componentRestrictions: {country: 'us'} }; var service = new google.maps.places.AutocompleteService(); service.getQueryPredictions(options, displaySuggestions); 

Please keep in mind that this is all for biasing the forecast; you cannot ask the PAC to exclude the results, only bias.

Answer 5

With a few searches, a solution could be found.

The request was approved and released earlier this year: Google Request

You can read the documentation for this information here: Google Documentation

Implementation:

HTML:

 <div id="text"> Search Place: </div> <div id="locationField"> <input id="autocomplete" placeholder="Enter text" type="text" /> </div> <div id="map"></div> 

Limit in which country the global variable is used, UK for the UK, USA for the Americas, etc.

 var countryRestrict = { 'country': 'uk' }; var autocomplete; 

Then, automatic completion automatically ends using the following:

  autocomplete = new google.maps.places.Autocomplete( ( document.getElementById('autocomplete')), { componentRestrictions: countryRestrict }); places = new google.maps.places.PlacesService(map); autocomplete.addListener('place_changed', onPlaceChanged); 

When changing the text, we call the onPlacesChanged function:

 function onPlaceChanged() { var place = autocomplete.getPlace(); if (place.geometry) { map.panTo(place.geometry.location); map.setZoom(5); var marker = new google.maps.Marker({ position: place.geometry.location, map: map, }); } else { document.getElementById('autocomplete').placeholder = 'Enter a Value'; } } 

This calls the get place function and adds a marker to the value of your choice.

JSFIDDLE: https://jsfiddle.net/hn8091fk/