CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3autocompletegoogle-places-api
jgg01
jgg01

Reputation: 21

Exclude Certain Locations in Google Maps Autocomplete

How do you stop certain countries from ever showing up in Google Maps Autocomplete?

I've found several solutions for narrowing down the search to certain areas, but am looking for a way to have a global search with only a few locations missing.

Background:

I have certain countries that are illegal for me to operate in, say 10~ in the world. We have a text box with google maps autocomplete for global searches, and I never want these countries to show up as options.

I have found ways to restrict the autocomplete to max 5 countries (componentRestrictions), but I want 240~ countries to be enabled in the dropdown and just never want to see the 10 countries. The only other answers I've found related to this solution revolved around actually clubbing together autocomplete results from .pac-containers with different sets of restrictions (240/5), which would generate a lot of calls for each character.

Other maps options I've looked into, like bounds and components, all revolve around restricting the limits of the search to one space, not excluding certain locations from the global space.

Code setup:

Api:

https://maps.googleapis.com/maps/api/js?key=${googlePlacesApiKey}&libraries=places

Autocomplete:

new google.maps.places.Autocomplete(input, options)

Restrictions Example:

restrictions = { 'country': ['CU', 'AE', 'AF', 'AG', 'AI'] }
this.autocomplete.setComponentRestrictions(restrictions);
this.options.componentRestrictions = restrictions;

(Restrictions on countries maxes out at 5 - to play around with restrictions, google hosts a nice js fiddle with documentation.)

Upvotes: 0

Views: 2800

Answers (1)

jgg01
jgg01

Reputation: 21

This worked with the inclusion method (include hundreds of countries): like the one developed by Chaussin at https://codepen.io/fchaussin/pen/KgEApw?editors=0010

This stops certain countries from ever showing up by only ever rendering the countries you want.

Essentially, loop together multiple service.getPlacePredictions then figure out a way to display them. This takes a long time (you'll have a ton of over query limit requests because Google limits their api per minute) and is nowhere near practical for any production level service that wants to render the expanded predictions for hundreds of countries, but works for more than 5 easily.

countries = [...long string of country codes]

  getAllPredictions(searchText) {
    const service = new google.maps.places.AutocompleteService();
    return Promise.all(
      _.chunk(this.countries, 5).map(countries => {
        return this.getPrediction(searchText, countries);
      })
    ).then(predictions => {
      return _.filter(_.flatten(predictions));
    });
  }

  getPrediction(searchText, country) {
    return new Promise( (resolve, reject) => {
      service.getPlacePredictions({
        input: searchText,
        componentRestrictions: {
          country: country,
        },
        types: ['(cities)']
      }, async (data, status) => {
        if( status === 'OVER_QUERY_LIMIT'){
          resolve( await this.getPrediction(searchText, country) );
        }else{
          resolve(data);
        }
      });
    });
  }

Upvotes: 1

Related Questions