Free Next.js Course: 9 / Google Places

so in this video we're going to continue along building out this ad house form and we've gotten to the point where we want to integrate google places search where we're searching for the address which will give us both the address of the house but also the latitude and longitude so that we can correctly place it on the map so if we go into the code we're working in this source components house form and where i added this comment sort of between the label and the search field sorry between the label and the errors where i have that comment is where we want to add the search field so i have an import up here import search box from dot slash search box where we're going to use that so this is search box like this and it's probably going to give us an error right now because nothing exists in search box but that's okay and we needed to pass two things to this component the first is what to do when the user finds and selects an address so this will be a function that's called called on select address so this is an arrow function and it's going to take in three things the first is the address that was chosen the second is the latitude and the lastly is the longitude and what are we going to do with those well in the use form hook we get this function back called set value and we're basically going to call set value for those three fields address latitude and longitude so set value the first one is what field we're setting the value for so let's say address address and then it will be the same but for long to we'll do latitude first latitude and then set value longitude and longitude like this the other prop we need to pass is the default value which for now is just an empty string like that but when we implement the um the edit version of the form we're going to pass the the current address of the house in as this default value so let's hop on over to the search box component where we're gonna start to integrate um google places search so let's get rid of this export and we're actually going to just start by declaring the props that we had passed over from this component so this will be an interface and we'll call it i search box props and it was the two things so on select address was a function that took an address as a string um yep latitude and latitude can be either a number or no because what happens if you like clear out the address you've told me that you want to deselect so i want to pass in a null latitude and longitude for that and the string would just be an empty string in this case so longitude is number or null and this function is going to return nothing so void so second we had the default value which was a string so with that in place why don't we start to i'm just going to add some spacing implement the search box component so we will export search box and remember that it took in the on select address and the default value and we'll just point it towards those props that we had declared above just like this so the first thing that we want to do is actually not to show an input box and get started with that for google places to work you have to first load the google places script so what we're going to do for that is first of all why don't we just uncomment everything so that we have access to everything we need and it's a lot of stuff google places isn't the the most easy thing to work with but we're going to work through it in this video here so what we're going to do is use a hook called use google maps script that will go and it will just ensure that the google maps script is on the page so this gives us back a boolean for whether it's loaded or not and then an optional error message if it didn't work out so use google maps script and to this we need to pass two things we need to pass the google maps api key which we'll get from our environment variables so process dot end dot next public public firebase api key and just in case more so for typescript than anything we're going to say or not coalescing into an empty string just so that it doesn't complain uh the the other thing you need to pass is you need to tell google script what libraries you want to load so we're actually going to declare these libraries outside of here and these are libraries like do you want to load maps do you want to load places and any of the other services that they offer so we're going to just declare a variable const libraries and it's of type libraries so there are defined number of libraries you can include drawing geometry places so the one we want obviously is places and that just goes in an array like this and libraries comes from the same use google maps script package so now we can pass in libraries like this so we'll just save go down a little and we're gonna do two checks first if it's not loaded what are we gonna do we're actually just going to return null we're not going to get fancy and add a loader or anything like that we'll just have that null and if there's a load error we're sort of in trouble at this point if this happens but we're just going to say it could be a span or a div or whatever and we'll just say error loading so that the user knows and you might want to get more descriptive or like call this number for help or whatever but for now we'll just say error loading so at this point if we get this far we know we've loaded the google maps script and we can we're basically ready to do the actual search box so what we're going to do is actually declare another component and this is not so creative but we're going to call it ready search box and we're going to pass in the exact same things so on select address we're going to pass on through and the default value we're going to pass on through as well default value save that it's going to give us an error because this doesn't exist yet but that's what we're going to go and declare below so let's get to it we're going to create a function called ready search box um for props it receives those two things so on select address and default value and we're going to give it the exact same interface for its props and now we get to use the actual google places work so this is handled um it's a little bit complicated as i mentioned and you can probably tell because of the number of imports the import we're going to use right first is this hook use places autocomplete so const it's going to give us a bunch of stuff use places autocomplete and to this we're going to pass two options so the first one we're going to pass is debounce and we're going to set it to 300 you can adjust this but this is basically like imagine you're typing an address and your fingers are flying and i don't know how quick you type a key let's say 15 milliseconds do you really want to go to google every 15 milliseconds when you're typing super fast no this is maybe like wait 300 milliseconds till after they're done typing then make one http request request to google this will save basically it will cost you less even though this should be free because we're just building an app but imagine real users you don't want 100 requests to google you want a few and we're also going to pass along the default value so what this gives back are a few things one is ready second is the value that they've currently entered into the input box another one is a function to change that value to set it so it gives us the suggestions that google places has come back with and that is actually an object that contains both the status and then the data the suggestions itself and then it gives us another function to call called clear suggestions okay so what we're going to do is we're going to move down and start to build out the ui for this and the reason i haven't looked really at the screen yet is because we really haven't shown anything visually yet so probably there's going to be an error and it's just going to be null so why don't we start to get some some of the visual stuff in place and then we'll go and check the browser to make sure that it's showing up and there's no errors and all that stuff so what we're going to do is return and we're using a package to display this called combobox from reach they have an accessible ui framework that doesn't apply too many stylings but it's pretty easy to work with so we're just going to use this to handle this combo box and the way it works is the outer component that we have is combo box combo box itself and we're going to put inside the input and then the different pop over options that show up but we do have to pass one prop to this combo box and that's what to do on select so we're going to create a function called handle select and for now oops if i could spell right handle select for now why don't we just declare like an empty arrow function so handle select is equal to this just to tell us like we got to come back and fill this in so inside of the combo box we have the input itself combo box input like this so we're going to give it an id of search and the reason for that is because we put a label out here with html4 search so this should line up to the id of the actual input we need to give it the value so that comes from this value here returned by use places autocomplete we need to handle when the user changes a value so we're actually going to declare another function here called handle um why don't we call it handle change we'll just put this above const handle change and this we will declare for now as an empty arrow function so back to the props we have to pass to combobox input we're going to disable it if it's not ready so that's this variable here coming back from use places autocomplete we're going to give a placeholder so what shows up when the user hasn't put anything in yet so search your location and then we can declare some classes which will come from tailwind so we'll just say to take up the full width of whatever container it's in and we'll add some padding to the input field lastly actually no why don't we start to see what it looks like and then i'll show you this last one that i want to add in so if we come here do a refresh it's now showing up let's just make sure there's no errors in the console so it looks good so see when i pop in it comes up with all of sort of the stuff that i've previously searched um different addresses in toronto and whatnot i actually don't want that to happen because it starts to mess up like as you type the the suggestions from the browser are fighting with the suggestions coming from google so i want to sort of turn that off and you can do that by saying auto complete with a capital c and it's going to tell you there's an auto complete with a lower c this messed me up for a long time that's something from combo box input itself which is different from the browser's suggestions that it's giving you so auto complete with a big seat and we're just going to tell it off so we come back now just do a refresh to make sure you can see when i click in here now it's not giving me those suggestions anymore so what we can do is if we want um prior to even showing the the results we should probably fill out these two functions because without them like you can't even type into here so why don't we do handle change first so what it's going to do it's going to receive an event and this event is a change event for which field for an html input element so we'll just get our typing right and the reason we want to do that is because now when we type e it it knows like that it has a property called target and target has a value value in it so what we're going to do is we're going to say every time the input changes we're going to call the set value function and set value will receive the e.target.value but if the e.target.value is empty meaning they've cleared out the suggestion what we want to do is really call this on select address to tell our parent sort of out here this form that um [Music] they want to clear everything out so we're going to pass an empty string null and null to that cool so the last thing why don't we handle the select what happens when the user actually picks one so what we're going to do here first of all we're going to make this async because we're going to do some asynchronous promise based work in here and when you select one you're given the address so that would be type of string and what we could actually just do for now why don't we get some console.logs in here so we can see sort of what's going on as we're typing so we're going to add two we're going to add the address here for on select and why don't we also console.log the status and the data so we can sort of see what's happening as we're typing okay so as i type let's say 10 young haha all right first error which is good so i got a request denied so i need to go in and figure out how to enable billing on my google cloud account this should have probably been done when we set up all of these keys back at the beginning but this is development this sort of stuff happens so i'm going to pause the video for a sec go enable billing and come back and then we'll kick on with this and i'll provide a link um actually why don't we just try to do it in here and we'll see how long it takes so that status was the request denied and they give you zero suggestions and that's because billing's not enabled so what we need to do is come in here house course and we need to attach it to a billing account okay somehow i have two hopefully this is the right one unable to enable billing for that one let's try this one okay you have multiple okay we're gonna go to linked billing accounts hopefully it's good now so we're going to come back search 10 billing is not enabled maybe it takes a second 10. yeah there we go all right that wasn't so bad i guess sorry you had to get through that but maybe that will help you if you run into the same error okay so we got a whole bunch of renders not sure why there's so many renders but finally when i typed in 10 we got a status of ok and then the data contained 10 addresses so if i were to type 10 young street you must enable billing i just did what are you talking about 10 young street okay must have been a hiccup they probably have different servers and they're sending around the billing it's like eventually consistent um okay so here we go here are the 10 young streets in our data coming back status of okay but we haven't shown any of them so we can't really select one of them yet so that's why this handle select isn't being called i'm just gonna comment this out for now and we're gonna go build the combo box pop over combo box popover we don't have to give it anything it's just sort of a wrapper or a div and in here we have the combo box list and we don't have to give anything to the list either but inside of the list what we're going to do is we're going to check the status so remember what we saw at the beginning was i don't know request disabled or whatever it was now it's okay so we're going to check to make sure that it's okay and if that is the case we're going to iterate over the data so we're going to do data.map and this will be an arrow function and it will when it gets its um data will render a combo box combo box option there we go so we're just going to do this and save so we can go fill in here so what do we actually receive here well we receive an object with a couple things the things we're interested in are the place id and the description just like that we could probably come back and look up here at the data so the description is the actual street and the place id is just a unique id that comes from from google so we've got the place id in the description because we're iterating we need to add a key and we'll use the place id for that and we also need to add a value to this combo box option so this would be the description what's going to be displayed to the user so i must have spelled something wrong no just took a while so there we go we'll come back here just do a refresh to clear everything out normally next.js is really good with hot reload but with google because it's an external script sometimes it gets messed up so 10 young street which is great we must enable billing they're still circulating around that billing information young street will select it finally the address is called so address 10 young street toronto ontario so that's perfect that's this handle select so at this point the visual aspect is basically done and we just need to go and implement this handle select so the first thing that we're going to do is just call set value and replace like up to the point that i've typed with the address that the user actually selected from the objects or from the options sorry so this will be set value to the address and we're going to pass false here should fetch data because we don't need to go and fetch additional data for this set value we already have the data we just want to set the value and we're going to clear all the suggestions you've chosen one there's no reason to keep showing all of those there then we're gonna wrap this in a try catch we're gonna put some fantastic error handling console.error and maybe we'll get fancy and we'll say um let's put up a scream like that error comma error okay perfect error message screaming in here we want to basically take this address and we need to get the latitude and the longitude from it so we're going to get some results and we want to call it get geocode get geocode which takes in um an object with address but this actually returns us a promise as you can see no you can't do a return but it is a promise so we're going to await for the results and once we have the results we want to from them get the lat and the lng so that's what google often uses not longitude they use nlg and we're going to await um another function call called get lat lng where we're going to pass in the first result so often when you pass up an address they might give you like a few results back best match to worst match so we're just gonna take the best match and then get the latitude longitude from that and once that's done we can now call onset select address passing up all the info so address the lot and the lng like this let's make sure it's good yes typescript is very happy okay so at this point it should be working you could choose this some requests denied hopefully they'll figure out their stuff okay that one was happy very nice but we don't have any visual cue to ensure that it is working so why don't we go back to house form and why don't we just sort of display um the value of the house so to sort of get the value of the house what we need to do is utilize something called watch which comes back so we're going to put it into a variable called address and we're going to watch the value of the address and then for now why don't we just we'll probably remove this later we're just going to pop it into an h2 so that we can see it the chosen address so we'll come back here we'll choose 10 young street again it didn't work so let's try one more time with a refresh 10 young street there we go so i just needed a refresh to i don't know kick things in here so we chose the address that gives us the um [Music] the value backup to the parent form and we used watch to basically grab the value from react hook forms and we're displaying it on the screen so what we want to do next is basically once we have the address and through that the latitude and the longitude we want to display the user the rest of the form so the image and the number of bedrooms before they submit it so we're going to call it a day on this video because it was pretty long and it had some issues but you know what i'm gonna leave all of those in so you can see the real development experience um all right the files we changed in this one were just two i believe so we we added the search box to the house form and then we built the search box one itself so i'm going to commit this with a stamp of this video and then we'll move on to the next thank you

Channel: Leigh Halliday

Views: 3,329

Keywords:

Id: 1Mrnxb9QhJU

Length: 25min 36sec (1536 seconds)

Published: Mon Jul 25 2022