CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3autocomplete
sajalsuraj
sajalsuraj

Reputation: 992

How can we restrict google map autocomplete to only a particular city?

My requirement is to get google places autocomplete suggestion only for the places in Bangalore, but if I search for any other place apart from bangalore then also I get the suggestions which I don't want. I have found many stackoverflow links related to my question but none of them are solving my problem.

Is this possible to get the suggestions of any particular city ?

I am sharing my code below :- 

var input = (document.getElementById('address'));
          var s_w = new google.maps.LatLng( 12.97232, 77.59480 ); //southwest
          var n_e = new google.maps.LatLng( 12.89201, 77.58905 ); //northeast
          var b_bounds = new google.maps.LatLngBounds( s_w, n_e ); //bangalorebounds

var options = {
            bounds:b_bounds,
            componentRestrictions: {country: "in"}
           };
var autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.bindTo('bounds', map);

autocomplete.addListener('place_changed', function() {

  //rest_of_the_code

});

Please somebody help !!

Upvotes: 1

Views: 9855

Answers (4)

Sandip Moradiya
Sandip Moradiya

Reputation: 726

Google is not providing autocomplete for particular city but we can do it manually. in my case i want to display address of 'Maharashtra' state. 

  this.GoogleAutocomplete = new google.maps.places.AutocompleteService();

    this.GoogleAutocomplete.getPlacePredictions(
  {
    input: this.autocompleteFrom.input,
    types: ['geocode'],
    componentRestrictions: { country: 'in' },
  },
  (predictions, status) => {
    this.autocompleteItemsFrom = [];
    this.zone.run(() => {
      if (predictions) {
        console.log(predictions)
        predictions.forEach((prediction) => {
          var statearray = prediction.description.split(",")
          var state = statearray[statearray.length - 2]
          if(state === ' Maharashtra'){
            this.autocompleteItemsFrom.push(prediction);
          }
        });
      }
    });
  });

i hope it will help you.

Upvotes: 0

San
San

Reputation: 666

Try like this.

var bangaloreBounds = new google.maps.LatLngBounds(
   new google.maps.LatLng(12.864162, 77.438610),
   new google.maps.LatLng(13.139807, 77.711895));

var autocomplete = new google.maps.places.Autocomplete(this, {
   bounds: bangaloreBounds,
   strictBounds: true,
});

autocomplete.addListener('place_changed', function () {

});

Note: The URL should be: https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY

strictBounds option was added in version 3.27 of Maps JavaScript API which is currently (January 2017) the experimental version.

Upvotes: 4

xomena
xomena

Reputation: 32100

You can use bounds to bias results, but there is no strict filter by city in places autocomplete at the moment.

You can find a feature request to add more strict filters in the public issue tracker:

https://code.google.com/p/gmaps-api-issues/issues/detail?id=4433

Please star this feature request to express your interest and receive updates from Google.

Upvotes: 2

Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

I think that you can try this: 

var cityBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(25.341233, 68.289986),
  new google.maps.LatLng(25.450715, 68.428345));

var options = {
  bounds: cityBounds,
  types: ['geocode'],
  componentRestrictions: {country: 'est'}
};

Replace LatLng value with your values and country with your country code.

Upvotes: 2

Related Questions