React google places autocomplete returning only one place (Needing zip)

Question

I'm attempting to use react google autocomplete, the issue I'm having is that for some reason both libraries react-google-places-autocomplete and react-places-autocomplete always return a single value from the search I make, which is wrong since when searching on google or with use-places-autocomplete it returns more values.

For example, when searching: 81237

The result I get from react-google-places-autocomplete and react-places-autocomplete array of 1:

[
    {
        "address_components": [
            {
                "long_name": "81237",
                "short_name": "81237",
                "types": [
                    "postal_code"
                ]
            },
            {
                "long_name": "Ohio City",
                "short_name": "Ohio City",
                "types": [
                    "locality",
                    "political"
                ]
            },
           ...
        ],
        "formatted_address": "Ohio City, CO 81237, USA",
        "geometry": {
           ...
        },
        "place_id": "ChIJJXK28KjiP4cRZNwTV9HTmB0",
        "types": [
            "postal_code"
        ]
    }
]

but from use-places-autocomplete array of 5:

[
    {
        "description": "Ohio City, CO 81237, USA",
        "matched_substrings": [
            {
                "length": 5,
                "offset": 14
            }
        ],
        "place_id": "ChIJJXK28KjiP4cRZNwTV9HTmB0",
        "reference": "ChIJJXK28KjiP4cRZNwTV9HTmB0",
        "structured_formatting": {
           ....
        },
        "terms": [
            {
                "offset": 0,
                "value": "Ohio City"
            },
            ...
        ],
        "types": [
            "postal_code",
            "geocode"
        ]
    },
    {
        "description": "81237 Geranium Avenue, Indio, CA, USA",
        "matched_substrings": [
            {
                "length": 5,
                "offset": 0
            }
        ],
        "place_id": "ChIJWQb2oxH42oAR_9paiGTudYc",
        "reference": "ChIJWQb2oxH42oAR_9paiGTudYc",
        "structured_formatting": {
          ...
        },
        "terms": [
            {
                "offset": 0,
                "value": "81237"
            },
            ...
        ],
        "types": [
            "premise",
            "geocode"
        ]
    },
    {
        "description": "81237 Victoria Lane, La Quinta, CA, USA",
        "matched_substrings": [
            {
                "length": 5,
                "offset": 0
            }
        ],
        "place_id": "ChIJv5gvO0RX2oARay4BYKgPMGA",
        "reference": "ChIJv5gvO0RX2oARay4BYKgPMGA",
        "structured_formatting": {
         ...
        },
        "terms": [
            {
                "offset": 0,
                "value": "81237"
            },
          ...
        ],
        "types": [
            "premise",
            "geocode"
        ]
    }
]

code logic:

import { geocodeByAddress } from 'react-google-places-autocomplete'

 const handleAddressOptionsFilter = async () => {
    try {
      if (!fieldAdrress) {
        setAddressOptions([])
        return
      }

      const formattedResults = data.map((result) => ({
        label: result.description,
        value: result,
      }))

      const rs = await geocodeByAddress(fieldAdrress)

      console.log('NewEvent: ', data, rs)

      setAddressOptions(formattedResults)
    } catch (error) {
      console.error('Error fetching geocode data:', error)
    }
  }

  const handleAddressOnChange = (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    form.setValue('address', event.target.value)
    setValue(event.target.value)
  }

  const handleAddressSelect = (option: Option) => {
    const street = option.value.terms[0].value
    const neighborhood = option.value.terms[1].value
    const city = option.value.terms[2].value
    const state = option.value.terms[3].value
    const country = option.value.terms[4].value

    if (street) form.setValue('address', street as string)
    if (city) form.setValue('city', city as string)
    if (state) form.setValue('state', state as string)
    // if (zip) form.setValue('zip', zip?.long_name as string)
  }

  return (
    <Base hideBg={true} bottomBar={false} allowFullHeight={true}>
      <div className="flex flex-1 mt-[18px] items-center h-full flex-col mb-[50px]">
        <form className="flex flex-col items-center">

              <Input
                type="autocomplete"
                placeholder="Address"
                className="mt-[18px]"
                register={form.register('address')}
                hasError={form.formState.errors.address?.message}
                form={form}
                onCompleteFunction={handleAddressOptionsFilter}
                onCompleteOptions={addressOptions}
                onChange={handleAddressOnChange}
                onSelect={handleAddressSelect}
              />
            

on the index.js I inserted the:

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY=places"></script>

I need to use the libraries from react-google-places-autocomplete and react-places-autocomplete because use-places-autocomplete does not return a ZIP

Answer 1

You mentioned that you're trying to utilize the Places Autocomplete service. However, from your provided code snippet, I noticed that you're not utilizing the <PlaceAutocomplete> component, but solely the geocodeAddress function which by the way is within the react-places-autocomplete library not react-google-places-autocomplete.

Upon reading the react-places-autocomplete documentation, the geocodeByAddress utility function likely utilizes the Google Maps Geocoding API. Therefore, it's converting user input such as "81237" which likely read by the geocoder as a ZIP code, into geographic coordinates and returning the primary location associated with it which is "Ohio City, CO 81237, USA".

If you want to use the react-places-autocomplete and you're aiming to provide Autocomplete options as users type even ambiguous address like "81237" into an input field, you'll need to incorporate the <PlaceAutocomplete> component.

Using the basic examples from the official npm documentation for both react-places-autocomplete and react-google-places-autocomplete, I'm getting five predictions when testing with the ZIP code "81237".

1.) react-places-autocomplete

Loaded the Maps JS API in my index.html

App.js

import React from "react";
import PlacesAutocomplete, {
  geocodeByAddress,
  getLatLng,
} from "react-places-autocomplete";

class LocationSearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: "" };
  }

  handleChange = (address) => {
    this.setState({ address });
  };

  handleSelect = (address) => {
    geocodeByAddress(address)
      .then((results) => getLatLng(results[0]))
      .then((latLng) => console.log("Success", latLng))
      .catch((error) => console.error("Error", error));
  };

  render() {
    return (
      <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              {...getInputProps({
                placeholder: "Search Places ...",
                className: "location-search-input",
              })}
            />
            <div className="autocomplete-dropdown-container">
              {loading && <div>Loading...</div>}
              {suggestions.map((suggestion) => {
                const className = suggestion.active
                  ? "suggestion-item--active"
                  : "suggestion-item";
                // inline style for demonstration purpose
                const style = suggestion.active
                  ? { backgroundColor: "#fafafa", cursor: "pointer" }
                  : { backgroundColor: "#ffffff", cursor: "pointer" };
                return (
                  <div
                    {...getSuggestionItemProps(suggestion, {
                      className,
                      style,
                    })}
                  >
                    <span>{suggestion.description}</span>
                  </div>
                );
              })}
            </div>

Result:

2.) react-google-places-autocomplete

App.js

import React from "react";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";

const Component = () => (
  <div>
    <GooglePlacesAutocomplete apiKey="YOUR_API_KEY" />
  </div>
);
export default Component;

Result: