Google Maps React Wrapper - Places API

Question

I'm using the Google ReactJS library to add Maps to my React web app. @googlemaps/react-wrapper

I was wondering if anyone has implemented Places autocomplete using this wrapper? In my past experience with Places, the implementation has been to load Places with the Maps script request to apis.google.com.

There doesn't seem to be much documentation or flexibility with this react-wrapper library from what I've been trying to do.

Thanks in advance

Answer 1

Found the answer within the readme, posting for anyone else who might be looking.

You can use the <Wrapper /> component from react-wrapper to load in scripts by passing in a libraries prop.

 <Wrapper apiKey="api_key" libraries={["places"]} />

From there, I recommend looking at their Maps implementation and following that implementation for the Places auto-complete widget. One important thing I found was to put the <Wrapper /> component outside the scope of the input ref. Also, you can use the <Wrapper /> components in multiple areas, just make sure the config is the same.

...

const [autoCompleteWidget, setAutoCompleteWidget] = useState<
    google.maps.places.Autocomplete | undefined
  >(undefined);

useEffect(() => {
    if (ref.current && !autoCompleteWidget) {
      console.log(`init widget`);
      setAutoCompleteWidget(
        new google.maps.places.Autocomplete(ref.current, {
          types: ["establishment"],
          componentRestrictions: { country: ["US"] },
          fields: ["place_id"],
        })
      );
    }
  }, [ref, autoCompleteWidget]);

...