Open abuzain432432 opened 5 months ago
I am setting the types to ['address'], but it seems that it has no effect on the suggestions. In the official docs, when I set the type to 'address' and try to search for addresses, I only get address suggestions, not just the country. However, as I am using this package, it is not working as intended. Official Docs: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete#maps_places_autocomplete-typescript
'use client'; import React from 'react'; import usePlacesAutocomplete, { getGeocode, getLatLng, } from 'use-places-autocomplete'; import { Input } from '@nextui-org/react'; import { useOutSideClick } from '@/hooks/useOutSideClick'; import { LocationSelectionType } from '@/types/index'; type Props = { // eslint-disable-next-line no-unused-vars onSelectLocation: (location: LocationSelectionType) => void; defaultValue?: string; }; export default function PlacesSearch({ onSelectLocation, defaultValue, }: Props) { const inputRef = React.useRef<HTMLDivElement>(null); const { ready, value, suggestions: { status, data }, setValue, clearSuggestions, } = usePlacesAutocomplete({ callbackName: 'YOUR_CALLBACK_NAME', debounce: 300, requestOptions: { types: ['address'] }, }); const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => { setValue(e.target.value); }; const handleSelect = ({ description }: { description: string }) => () => { // When the 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(); getGeocode({ address: description }).then(results => { const { lat, lng } = getLatLng(results[0]); const bounds = results[0].geometry.viewport; const { lat: swLat, lng: swLng } = bounds.getSouthWest(); const { lat: neLat, lng: neLng } = bounds.getNorthEast(); onSelectLocation({ lat, lng, ne: { lat: neLat(), lng: neLng() }, sw: { lat: swLat(), lng: swLng() }, placeId: results[0].place_id, address: description, }); }); }; React.useEffect(() => { if (defaultValue) setValue(defaultValue, false); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const renderSuggestions = () => data.map(suggestion => { const { place_id, structured_formatting: { main_text, secondary_text }, } = suggestion; return ( <li className='py-1 px-2 cursor-pointer hover:bg-gray-50 border-b border-b-gray-300 ' key={place_id} onClick={handleSelect(suggestion)} > <strong>{main_text}</strong> <small>{secondary_text}</small> </li> ); }); useOutSideClick({ ref: inputRef, handler: () => { clearSuggestions(); }, enabled: status === 'OK', }); return ( <div ref={inputRef} className='relative w-full'> <Input value={value} onChange={handleInput} disabled={!ready} size='sm' placeholder='Type location here' classNames={{ input: 'w-[85%]', inputWrapper: 'data-[hover=true]:bg-default-100 ', }} /> <span onClick={() => { clearSuggestions(); setValue('', false); }} className='absolute top-0 right-2 cursor-pointer text-[13px] text-red-500 translate-y-[40%]' > Clear </span> {status === 'OK' && ( <div className='absolute w-full top-0 z-10 translate-y-[50px]'> <div className='w-full py-3 shadow-lg bg-white rounded-lg text-charcoal overflow-y-auto scrollbar-hide h-[300px'> <ul className='px-2'>{renderSuggestions()}</ul> </div> </div> )} </div> ); }
I have solved this problem by using another package which recommended by Google Map Docs. @googlemaps/extended-component-library/react
I am setting the types to ['address'], but it seems that it has no effect on the suggestions. In the official docs, when I set the type to 'address' and try to search for addresses, I only get address suggestions, not just the country. However, as I am using this package, it is not working as intended. Official Docs: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete#maps_places_autocomplete-typescript