Restrict location search about react-google-places-autocomplete HOT 4 CLOSED

Hi @DeanKamali,

The correct way of adding restrictions to the autocomplete is by adding thm to the getPlacePredictions call on line 9:

this.placesService.getPlacePredictions(
      {
        componentRestrictions: {...},
        location: {...},
        input: value,
      },
      this.fetchSuggestionsCallback,
    );

I haven't tested this myself, but you can take a look here for why I think this is the correct approach:

• https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service
• https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest

I'll be able to add that feature next week, but if this seems to work feel free to open a PR! 😄

from react-google-places-autocomplete.

@DeanKamali I have tested this and it works! Working on a new version with the feature now

from react-google-places-autocomplete.

@Tintef that’s awesome! I’m also hoping if you could figure out how to get postal code / zip code! It’s crucial to have this info when processing payments for example.

from react-google-places-autocomplete.

@DeanKamali

It's not possible to get the postal code from the placesPrediction call. In order to get that information another API call is necessary using the Geocoder. Here's a little script on how to obtain the postal code:

const geocoder = new google.maps.Geocoder();
geocoder.geocode({ placeId: <placeId> }, (res, status) => {
  if (status === 'OK') {
    const postalCode = res[0].address_components.find(component => (
      component.types.some(type => type === 'postal_code')
    ));
    if (postalCode) {
      /* use the obtained postal code
          notice postalCode is an object like the following:
            { long_name: <longName>, short_name: <shortName> }
      */
    }
  } else {
    /* Error */
  }
});

You should get the placeId from the onSelect function provided to the GooglePlacesAutocomplete component.

Hope this helps, I'll try to add this option later on, but this should do the trick for the moment.

from react-google-places-autocomplete.