Restrict Autocomplete Google to a specific administrative area

Question

I want to restrict the Autocomplete of Google Maps Api to a specific area. I have found a solution but it doesn't work perfectly.

• How to desactivate the event 'keyup' of the autocomplete or delete the predictions ? In the solution, i had add a setTimeOut function which delete the predictions but i would like a another solution if it's possible.

• I need to put a space after the name of the street for display the predictions.

Any help is welcome ! Thanks

**

Code

let autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocompleteInput'), {
  types: ['geocode'],
  componentRestrictions: { country: 'fr' }
});

let input = document.getElementById('autocompleteInput');
let inputValue = (<HTMLInputElement>document.getElementById('autocompleteInput'));
let help = document.getElementsByClassName('pac-container');


google.maps.event.addDomListener(input, 'keyup', function (e) {
  if (this.value !== '') {
    let valueup = help.item(0).childElementCount - 1;
    if (this.value.length > 1) {
      for (let i = valueup; i <= valueup && i >= 0; i--) {
        help.item(0).children.item(i).remove();
      }
    }

    let placesugges = function (placeresult, status) {

      if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (let i = 0; i < placeresult[0].address_components.length; i++) {
          let element = placeresult[0].address_components[i];
          if (element.types[0] === 'administrative_area_level_1' && element.short_name === 'Île-de-France') {

            let tes = document.getElementsByClassName('pac-container');
            let divtest = document.createElement('div');
            divtest.className = 'pac-item test';
            divtest.innerHTML = '<span class="pac-icon pac-icon-marker"></span><span class="pac-item-query" >'
                                + '<span class="pac-matched"></span>' + placeresult[0].formatted_address + '</span>';
            tes.item(0).appendChild(divtest);

            divtest.onmousedown = function () {
              inputValue.value = placeresult[0].formatted_address;
              google.maps.event.trigger(autocomplete, 'place_changed', placeresult);
            };
          }
        }
      }
    };

    let displaySuggestions = function (predictions, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        predictions.forEach(function (prediction) {
          let test = new google.maps.Geocoder();
          test.geocode({ 'placeId': prediction.place_id }, placesugges);
        });
      }
    };

    let service = new google.maps.places.AutocompleteService();
    let request = {
      input: this.value,
      componentRestrictions: { country: 'fr' },
      types: ['geocode']
    };
    service.getPlacePredictions(request, displaySuggestions);

    setTimeout(function () {
      let valueup = help.item(0).childElementCount - 1;
      for (let i = valueup; i <= valueup && i >= 0; i--) {
        if (autocomplete.gm_accessors_.place.Ac.gm_accessors_.input.Ac.D.children[i].className === 'pac-item') {
          autocomplete.gm_accessors_.place.Ac.gm_accessors_.input.Ac.D.children[i].remove();
        }
      }
    }, 300);
  }
});

**

Answer 1

This is currently not possible, but there are 2 feature requests that may interest you:

• Issue 4433: allow componentRestrictions to filter same components as the geocoding API service
• Issue 8606: Place Autocomplete: bounds restrict