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.
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>
);