No video :(

Google Maps Place Autocomplete in React

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

Просмотров 14 тыс.

50% 1

Tutorial on implementing Google Maps Place Autocomplete in your react app. Focuses on creating an autocomplete search bar utilizing React Hooks and a script loader to host on a third party site like Heroku.
APIs that need to be enabled
- Maps Javascript API
- Places API
Links
Source Code: github.com/wil...
Create React App: reactjs.org/do...
Google API Key: developers.goo...
React Place Autocomplete: github.com/hib...
Script Loader: github.com/leo...
Connect with me
Linkedin: / wilda-cheng
GitHub: github.com/wil...

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

26 авг 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@vishal.rathoree 3 года назад

Thanks for the video! Good that you showed how to protect API key as well.

@Muhammed-nani964 2 года назад

Keep it up noice job It’s always to see react developers 😁

@jHallyson32 2 года назад

my guardian angel

@mohamedm.5792 3 года назад

Amazing video!! Well done explaining the concept in details. 👍👍

@korallevi22 3 года назад

thanks for the great video! explained well!!

@ridikuloz 4 года назад

very gud

@Erluigi2011 3 года назад

Thank you for the video!!

@carolynchien2710 2 года назад

Hey! I followed along but when clicked on the suggestion it doesn’t update my input field. Can you please tell me why? I’ve done some research but still didn’t get it working. Thank you.

@muhammadalbab2678 2 года назад

hey, great video! i have one question. to get our API keys working do we have to create billing account first or we can skip that part? thanks

@user-cg8hz4mf7z 3 года назад

Thanks, I have implemented and everything is ok except when I click with the input empty because an error is triggered with legend ZERO_RESULTS or INVALID_REQUESTS and I can't catch that problem to avoid the app brearks

@wcodes9843 3 года назад

You can try to disable the search button/icon to prevent the user from searching when the input field is empty. Hope that helps!

@jamilabbasOfficial 3 года назад

Super!

@tasaduqhaqaq979 3 года назад

could you please please guide how to implement an autocomplete on google maps .however in my code i am getting users current Location and i am displaying the location on map as well also i am getting dynamic address from Google Api. Now i want to implement Autocomplete when i try to import Google react autocomplete it's giving error message like Autocomplete is undefined

@nimrahadam7209 2 года назад

Thanks for the video. My app is working fine on the local server but after deploying on heroku it only shows the loading string and no suggestions. I have not included any restriction for my api key. Can you please tell me why it might not be working ?

@amaricalypse 2 года назад

check your input props correctly

@priyaranjan1733 3 года назад

Thanks :)

@YoussefZidan 3 года назад

Thanks you

@dmitrykabanov2869 2 года назад

Hi all. I'll give you an additional example, hope its gonna help someone My task is to create autoComplete wich returns addresses of USA and Canada I just added additional optional attribute into PlacesAutocomplete -> "searchOptions={{ types: ["(cities)"], componentRestrictions: { country: ["us", "ca"] } }}"

@Eng.Ahmed-iftikhar 3 года назад

can we restrict person on a specific country like the UK he only search places in uk

@wcodes9843 3 года назад

Yes, it's possible. In the react places autocomplete component there is a prop called searchOptions where you can pass the location's latitude and longitude and radius if you want to restrict the search field.