How To Integrate Google Places Autocomplete in React

Hello friends welcome back to the new tutorial of the react chase today we are going to learn how to add Google autocomplete in your react projects so those who haven't subscribed my channel yet please do subscribe my channel and if you like the video please do like share and comment on my video so let's get started so the package that we are using is this one that is called the Riyad Google Maps API okay so you need to install this package and this is a full-fledged code that I am using over here so you can see that we I am using the script loaded and the this this one that is called search box so here let me scroll this one this is called the Standalone search box if I go and just check this one you can see that we have the load script and we have the Standalone search box so whenever you uh add this this npm package here at Google Maps API okay so this is the places component the full one okay then we have export it okay then we have a handle Place change whenever we are going to change with the places then we are going to check a console.lock the formatted address lat and the long right so here we have in the load script you can see that in that part also in the script loaded we have to add the keys right so you need to add the keys after that we have a standalone search box where we have the on load functionality you can see that onload on place is changed on places change handle places changed okay when you can you can do that whatever you can add the places you can just console.log what's the search printing up right and this is the input you can customize it accordingly by box sizing where it hide anything okay the same thing which I have done only I have added the type class name and the placeholder and close this one right all you are getting from this Google Maps AP slash API so no need to worry about this okay so let's go and add that uh search this one so I'm going to search with the let's see it's working or not so we have this one so I'm going to add it the Mohali so you can see that if I just select Mohali sector face this one now you can see that Mohali seven face then this is the large this is the longitude right so this is how you are able to get the data you can also save the data part right so which location I have chosen if I go and check Chandigarh okay configured sector 17. okay so you will get all the this is the lab this is the longitude so this is how we are able to add the autocomplete functionality into your react app any doubt any query in that let me know in the comment section thank you so much for watching this video have a great day so don't forget to like share and comment on my video and this this is the full Fletch code of that one that you can use it from here and no need you can just go and you can identify where there are very different different things that you can explore over here I'm just exploring the Standalone search functionality so you can they have the all load functionality on places changed on unmount options so you can use all these methods of that one into your react project any doubt any query let me know in the comment section thank you so much for watching this video have a great day

Channel: Technical Rajni

Views: 10,538

Keywords: How To Integrate Google Places Autocomplete in React, react-google-autocomplete examples, How do I use Google autocomplete react?, How do I add autocomplete in react?, How do I use Google places autocomplete API in react?, How to Use Google Place Autocomplete With React, React Google Places Autocomplete, react-google-maps, google maps api, react, javascript, autocomplete, google maps javascript api, google maps, react tutorial, google maps react, reactjs, react js, learn react

Id: pDPOwmBzBd8

Length: 3min 23sec (203 seconds)

Published: Sun Feb 19 2023