Use google's autocomplete service to search (and output) only country and/or city

Question

I initialise google places api as follows:

<script
      type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&types=cities"
    ></script>

and in my code, I bootstrap the service as follows:

const autocomplete = new window.google.maps.places.AutocompleteService();

autocomplete.getPlacePredictions({ input }, predictions => {
 console.log(predictions);
});

autocomplete.getPlacePredictions('London');

I'd expect the query to only return a set of cities matching that query, but instead it returns a list of London based addresses.

How could I make it return only city results matching that query?

Answer 1

The types property cannot be added to the Maps API script itself. You need to add it to your request to AutocompleteService.getPlacePredictions as follows:

autocomplete.getPlacePredictions({ input: 'London', types : ['(cities)'] }, predictions => {
    console.log(predictions);
});

Maps JS API script (without types):

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>

Output:

London, UK
London, ON, Canada
London, KY, USA
Londonderry, UK
London, OH, USA

For reference check out the resources below:
AutocompletionRequest interface reference
Autocomplete for Addresses and Search Terms

Hope this helps!