Google Autoplaces Material UI

Подписаться 107

Просмотров 1,2 тыс.

50% 1

#google #placesapi #autocompletesuggestions #materialui #reactjs #typescript
Hey guys, just a small video on how to use use-places-autocomplete (github.com/wel...) library to fetch places on user input in Autocomplete component from Material UI. The library does all the heavy lifting for you handling the place predictions of Google Places API.
Make sure to generate an API key first: developers.goo...
If you don't have google could project, then you can follow the steps here.
developers.goo...
I also forgot to mention that you can pas freeSolo prop to Autocomplete to remove the default No Options dropdown when there's no input given.
Happy Coding!

Опубликовано:

16 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 7

@chineduugbo310 7 месяцев назад

Nice video. How can one hide the API key in .env then use it on index.html file.

@Martin-rq5tp 9 месяцев назад

Great video! How do you restrict the suggestions within a specific country?

@brandon400 9 месяцев назад

could you do it bro?

@Martin-rq5tp 9 месяцев назад

@@brandon400 Yes! you can add extra params in usePlacesAutocomplete like this: const {suggestions: { data } } = usePlacesAutocomplete({ types: ['geocode'], requestOptions: { componentRestrictions: { country: 'US' }, }, }); you can check the country codes on their documentation and make sure to clear cache as there was an issue raised, which I experience as well, where this won't reflect without clearing cache.

@brandon400 9 месяцев назад

Thank you very much martin

@TP29 6 месяцев назад

hi, How do I get the address for Italy?

@sonam-serchan 3 месяца назад

Hey, sorry for late reply! Did you get your answer? If not, you can restrict the country following way: const {suggestions: { data } } = usePlacesAutocomplete({ types: ['geocode'], requestOptions: { componentRestrictions: { country: 'US' }, }, });