Why yours basic example doesn't work for me

Hello,

I’m trying to use yours basic example to be able to understand how to use your module in my system but seems nothing to work. I don’t have any console errors and have no idea what wrong actually. I hope you can help me to understand what I’m missing.

Thank you and the code

import { useLoadScript } from '@react-google-maps/api';
import useOnclickOutside from 'react-cool-onclickoutside';
import usePlacesAutocomplete, {
  getGeocode,
  getLatLng,
} from 'use-places-autocomplete';

const libraries = ['places'];

export default function AutoCompletePlaces() {
  console.log('IS IT RUNNING ????');

  const API_KEY = process.env.GOOGLE_PLACES_API_KEY;
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: API_KEY,
    libraries,
  });

  console.log('LOADED ????', isLoaded, loadError);

  const {
    ready,
    value,
    suggestions: { status, data },
    setValue,
    clearSuggestions,
  } = usePlacesAutocomplete({
    // requestOptions: {
    //   /* Define search scope here */
    // },
    debounce: 300,
  });
  console.log(status, data);
  const ref = useOnclickOutside(() => {
    // When user clicks outside of the component, we can dismiss
    // the searched suggestions by calling this method
    clearSuggestions();
  });

  const handleInput = e => {
    // Update the keyword of the input element
    setValue(e.target.value);
  };

  const handleSelect = ({ description }) => () => {
    console.log(description);
    // When user selects a place, we can replace the keyword without request data from API
    // by setting the second parameter to "false"
    setValue(description, false);
    clearSuggestions();

    // Get latitude and longitude via utility functions
    getGeocode({ address: description })
      .then(results => getLatLng(results[0]))
      .then(({ lat, lng }) => {
        console.log('📍 Coordinates: ', { lat, lng });
      })
      .catch(error => {
        console.log('😱 Error: ', error);
      });
  };

  const renderSuggestions = () =>
    data.map(suggestion => {
      const {
        place_id,
        structured_formatting: { main_text, secondary_text },
      } = suggestion;

      return (
        <li key={place_id} onClick={handleSelect(suggestion)}>
          <strong>{main_text}</strong> <small>{secondary_text}</small>
        </li>
      );
    });

  return loadError || !isLoaded ? (
    <div>FAIL</div>
  ) : (
    <div ref={ref}>
      <input
        value={value}
        onChange={handleInput}
        disabled={!ready}
        placeholder="Where are you going?"
      />
      {/* We can use the "status" to decide whether we should display the dropdown or not */}
      {status === 'OK' && <ul>{renderSuggestions()}</ul>}
    </div>
  );

[Jakub41]

For every one has some similar issues as mine.

My problem was that, the API loader is handle by React and by the package @react-google-maps/api and the loading was not done before the autocomplete was executed. This was provoking issues.

The solution was to wrap the loading in a sub-component and let finish the loading before passing to the autocomplete part

export default function PlacesApiLoader() {
  const API_KEY = process.env.GOOGLE_PLACES_API_KEY;

  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: API_KEY,
    libraries,
  });
  return !isLoaded || loadError ? null : <AutoCompletePlaces />;
}

In this way all started work as should :) 

[Jakub41]

Yes will do that but I’m not on the pc. Will copy paste what I did with an explanation later.