ONLY 30 Minutes! Add Google Address Autocomplete, Next JS 14

uh what you guys are looking at is one of the tutorials that I did uh in which we added Google Maps to a nextjs project uh as you can see right here uh if you guys haven't watched that I was highly recommend it to watch that uh and then come back to this tutorial I also put a link in the description just in case uh but essentially just for those who don't know what we did is we added Google Maps to a um this uh next project we were able to add a marker and then we were also able to able to add the GPS coordinates um so it was a very fun project uh but now in this tutorial uh I'm going to take this a step further and we are going to basically not only show Google Maps uh but I have changed the code a bit which is this a bit more efficient uh and then also we're going to add um see how we can use the places API and the new places API so these are this is a new uh I guess APF from Google uh it's uh has a lot of improvements and we're going to see how we can use that and this will help us to do things like autocomplete so when you type in an address it's going to actually show you suggestions I'm going to show you guys how we can actually limit to a certain country even to a certain Province uh and or a certain uh Geo codes uh or um GPS coordinates so that way uh you're going to save money uh when it comes to billing uh this can be useful um when somebody is trying to find let's say restaurants um let's say places to visit or schools or parking spots so that's where it's going to be useful now I this is part of a bigger project that I'm working on uh which is essentially F finding parking spots but we're going to leave that for another topic when it's released then you guys will see it uh so you guys uh like And subscribe so that you guys can get updated anyway so now that that's out of the way all right so this is the project right here uh and it's a work in progress as I said but we're going to focus on the map component right so I already assume you guys know how to create a nextjs project and then the pages and components and all I don't have to explain that anyway so here we have a client component uh this has to be a client component because a map has to be rendered on the U browser so that's why we have to use use client uh for that now uh so it's very simple we're using um Tailwind CSS so that's just the class name anyway so let's go over to the package.json and these are the some of the dependencies uh you want to install so I'm going to zoom in I'm sure it's a you guys can see it but anyway so you guys need to install these Google Maps uh GS API loader that's one of the um uh dependency you need to install the second one then is is react Google M Maps API that's the second one you need to install so these are prod dependencies as you can see but then if I scroll down under Dev dependencies since we're using typescript we need to install also this types um dependency so you guys can type this uh in I'll put this in description description so you guys can um basically copy and paste but I just want to let you guys know about that so we're going to just zoom it at this level all right so the other thing we need to now do is go ahead head and see how we can get the API key first of all and then also see how we can enable the places and the new places API on the Google API platform all right so here I have a browser and I'm just going to type in Google Maps API like that so you're going to hit this one so I'm going to just hit the maps platform Google for developers all right so basically brought me here so I'm going to do basically get started all right cool so it brought me here and uh as you can see you're probably going to land on the same page what you want to do then on the left side is this is where your apis are so go over to apis and services all right so here's a whole bunch of apis you will see we don't want I mean to scroll all through all of them but essentially what you want to do is you want to go to let's say Maps right and this is where you can enable the API that you want so there's a whole bunch of apis here the one you want to enable is called the maps JavaScript API and you can see I have enabled that so go ahead and enable that one and then you're going to come over and hit the placees API and then here you can see that uh again there's different kind of apis here but the one that you want is the um place API the one I was talking about and the placees API new so this the next generation of the place API uh and this one has more actually as you can see this is 200 million places this one is only 100 million if you want to use just this one then I would say you can disable this one you don't need this so once you have this um uh enabled then you're going to go to keys and credentials and this is where you you're going to basically um if if you don't have um let's say API key just click on the create credentials enter a project name and then you can uh have your API key here all right so I have a service account here you don't need that uh that was for something else you just need the API key and you can always click on the show key and this will show you the API key that you need so you can just copy it from here and then we're going to put it in the project now one thing that a lot of people ask is um well if I'm putting this on the project then it's going to be people will see it and because we're using a use client it's on the front end in the browser so the API Keys basically visible true that is correct but you can uh the way this works like this that if I click on the API key sorry key so as you can see you you have to set restrictions so if you do none then of course anybody can come in take your API key and use it and do whatever they want with it but when you do web sites right so then what will happen is you can then limit it to your domain so even if I take your API key and I use it it it will not work because I'll it will it'll be coming from a different domain all right so what I have here now is the just a code on left side and the dashboard on the right side so now we're going to get cracking so what I have here is two buttons so one is a a list View kind of tile view where people can do the stuff so as I said this is the project that's coming up so if you guys want to you guys can like And subscribe and you guys will see but we're going to focus on the map part which is right here so this is where the map will be shown all right as we can come here and first thing I will do is we need to um when we add the map we need to get a hold of it so for that the best thing is to use a state so I'll do map set map and we will use state so from react like that all right so it's going to have a type and the type will be basically google. maps. map okay or null and then I'm going to do null like that so that's uh one thing then the other thing we need is uh we're going to have an auto complete right so that we can show the suggestions so I'm just going to get a hold um create a state for that so it's going to be autoc complete all right so we have these two now we need to load the um AP uh we need to load the uh Maps right the libraries the different libraries so before we do that uh if I come over here and if I go to M.L so if you do don't have this file go ahead and create it I'm going to click it and in this one I have basically added the nextore public unor Maps API key you want to add the nextore otherwise you will not be able to access this on the front end so just want to make sure you get that out of the way H you might have to restart the project once you add this anyways so I'm going to minimize this minimize this all right so what we can do is we can then say const is loaded right so this will tell us if the apis have been loaded or not and for this we will use this use J use JS okay API loader now it's not going to bring it on its own so what you would have to do is you would have to um do it uh here so I'm going to do import all right so basically um you're just calling it and then the Constructor you can pass you know um I'll say first of all Google Maps API key of course that's the main thing so I'm going to pass in this through the process. n. next public so this the same um same um token that you use in the that end file and it's going to be a string okay and then we're going to basically give it now another thing it's called libraries right so what kind of libraries are we actually loading now you can put the libraries here in an array but uh I guess a better way of doing this would be like this you're going to come just create a constant I'm going to call it Libs and then it's going to be of type Library okay it's coming from the JS API loader it's going to be an array like that and then what we can do then is uh start adding the different Library so I'm going to import the core I want the maps I want the places so this will help us with the places search and then I want to do a marker okay cuz this will help us place a marker now uh this is an array and I'm um making an object silly mistake anyways so there you go so now that we have that then I can come here and I can say Libs all right so then after that what I need is I need a reference to the map so that we can um show it on the right here okay so what I can do I can say map ref okay and then I can say use ref from react we can use that and it's going to be an HTML div element so I did this in the tutorial that I mentioned at the beginning of this video uh there's nothing different here now we also need one for the places so I'll say Place autoc complete ref and it's going to be use ref now this one is an input element so I'm going to do input element and null like that cool with this out of the way I think it's better to uh show a map because we've been coding for a while so I would like to see a map at this point so let's start and do a use effect hook uh like so all right and then what we want uh when we want this to load well when we want this loaded so we can say when we have the loaded thing change and then here we will do is loaded then we can say do something okay um so let's do this to show the map one one thing I will do is I will come here and I'll add a div but actually the way I will do this is like this if it's loaded okay uh then we're going to show it so I will come here and I will say Dave and let's just give it a style and I'll do height of um let's say 600 pixel and ref will be whoa ref will be map ref okay and then otherwise if it's not loaded then we just say loading like that all right so this will be good because I think in the previous thing we were just loading it right away so in case somebody's on a slow network uh it'll be a bigger problem but now uh we wait until it's loaded so that's a good thing so I'm going to save on this and you can see there was that loading thing that popped up anyway so now uh what we can do now is come here we're going to define the map option so I'm going to do map options okay and then we want to center it somewhere okay so the center will be L okay and we'll say lat long. coordinates okay so this is the same as the previous tutorial uh as you can see I'm passing it right here to the function lat long all right and then the longitude will be lat long. coordinates and this will be one like that all right and then what I do is I'll set a zoom level I'm set it to 17 and let's give it a map ID and we'll just do my map 1 2 3 4 like that so this our map options then what we can do is we can set up the set up set up the map and the way we're going to do this we're going to say cons Google Map is equal to so you're going to do new Google do maps. map like that so here's the map class CL and we're going to call it and what we pass to it is well I think I should bring this on the next line so we can see uh so you want to give it the uh where where it's going to get basically the map is going to rendered right so we can do map ref. current all the way of doing this would be that you can uh give the element an ID and then you can pass that here and then we're going to do as HTML div element let me see see like that okay and then we're also going to give it the map options cool all right so let's see if I save now and there so we can already see that just by doing this uh the map is showing uh why because we have the coordinates that being passed and then we have the elements so things are looking already good cool now we need to save this uh reference somewhere so I'm just going to come to the next line and then I can do set map to G map because we would need this later on when we do the marker and all that so we're going to just um basically come here and have this reference right here okay I'm going to save it let's make sure there are no errors I'm going to inspect console and let's see console um let's just refresh cool so no errors which is good all right so that's awesome all right so now we need to set the auto complete so what we what we're going to do is we're going to say set up Auto Complete okay and the way we do this we'll say cons G Auto Complete is equal to new google. maps. places like that and then we're going to do auto complete okay I'm going to bring this on a new line so we can see what's going on okay so it's going to be the same thing Place autoc complete ra. current as HTML input input element okay so there you go so that's your auto complete uh and now what uh we can do is we can then come here and I can do set autoc complete to G auto complete complete like that but how do how can we see the autocomplete um like the the the bar at the top the input bar so the way we can do this is I'm thinking we can come here and maybe just uh add it here so I can do input so thisp put is coming from shaten uh UI input like that and then I'm going to do a ref all right ref it's going to be G Auto Complete let's see y sorry Place autoc complete ref like that okay and let me save it and as you can see that is coming the auto complete and if I type in address of course nothing is happening at this point I'm going to refresh okay so now the map is coming and this is so now let's say Niagra Falls there you go so already we are getting um just with honestly little little code we are getting a nice suggestions address so one problem um that I see here is you can see it's saying nagra Falls Ontario but then also Niagra Falls New York and so this what I was talking about that let's say we want to just um limit this search to Canada onor right so then or New York we don't want to see all these because you're going to get build I guess for these searches so there's a way that we can limit this and I'm going to show you guys how we can do this so I'm going to to get out of this and the other thing is like for example if I do CN Tower so you can see it's going to like Edmonton but if someone's in onario they don't want to necessarily see that so that's one thing uh number two we need to do is when I click on let's say something this one I want the map to fly over to that location and Center on it and I also want to show a pin with the name of the place right so we want to show that so let's get started with the first limiting the location first the geographic location and then we're going to worry about how we can do the pin and all that all right so we're going to come here and maybe right before this what I can do is I can say cons so first let's add a thing it would say limit the uh Place bounds okay so I can do cons so let's say I'm going to do Ontario you can do for your wherever you are let's say New York or um some place so I'm going to do new Google do maps dot all right so this one where you going to this is where you going to do lat long bounds okay like that so you're going to do the lat long bounds and then the way it works is you basically do new Google so these are the Southwest um coordinates so let's say this is your map this is the north this is the South this the East this is the West all so you're going to start from the um South West right here this corner and then the Northeast which is this corner so it's basically what it does is it will draw like a rectangle that's all you're trying to do here so and the way you get these is you can just go to like Google Maps for example um let's say I go to Google Maps New York all right so I'm I'm here I'm want to expand this I just want to show you guys how how you would do this let's see you're doing this for a client so let's say this is this is um right this is let's say New York right all right so how can I how do you do this than the limiting so you see it will draw a boundary for you right so I think these dotted lines are like a boundary so then so this is North this is South so this is East this is West so you're going to do uh Southwest so you're going to take the Southwest most corner from here to the Northeast um which is the top right and it's going to basically draw like a nice rectangle and that's how you're going to limit your um bounds so I'm going to close this we don't need that anyway so that's how I got this my bounds so I'm going to do maps that lat long okay and then you want to give it the lat right so I'm not going to type these uh because I have them these are just numbers so I'm going to come here and I'll say say this so that's my Southwest okay and then I need the Northeast so same way uh I'm just going to come here and I'm going to do Northeast so there you go that's that these are my bounds okay so I got the bounds now I'm going to save it now one thing that happens is when you do this auto complete it's going to return a lot of fields right so for example if I come here I say Google Places places API Fields all right so here Fields so if you come here it actually here we go so it will return all these fields as you can see address components background icon opening hours and a lot so depending on what you want so let's say you're building an app that is about the hours and review so definitely you need those right see served beer like there's a whole bunch of fields now one thing I will tell you is this will cost you if you get all these fields and honestly you don't need all these fields so there's a way that you can actually restrict this and let's see how we can do that so I'm going to come back here and as you can see where we did this um um autocomplete and this is where we can now start playing with this so you're going to open this this right so the first thing I'll do is I'll say bounce and I'm going to do Ontario bounce that's my bounce okay then I'm going to specify the fields that I need I don't need all the fields I just need the formated um let me do the formated um address okay I need that I need the geometry now the geometry is actually the latl long and that's what you pass to the map to place a marker and then I need a name for this right so we can display it on a card and then also component restrictions okay under this then you have a country um field and I'm going to limit this to Canada only so we don't get the New York or all that so let's save it so if now if you remember before if I do Niagara you see how it's showing New York but now I'm going to refresh we're going to come back here and now watch if I do Niagra as you can see I'm not getting New York anymore it's basically just limiting to Ontario and that's what I was talking about now you're just focusing on that region and it's going to save you a whole bunch of bandwidth and money and blah blah blah all right so now that I have that and then we what we can do now is as I said when I select a a place on the map I want it to jump to that location so let's first display the name here so that we can see it and for that I will come I can just come here and I can say const I can say Place selected place like that you state okay and let's just uh let's just set it to null okay and we'll just give it a type just to be nice it's going to be a string or nothing like so and then over here uh then I can do a label okay and then in here I can just put the place like that so if I save now it's not going to show anything because we haven't done the the deed yet so there's something what you can do is called these um basically this auto complete has a listener so you can listen for events all right so what I can do is I can minimize this because we're done with this but what we will do is I'm going to use another hook that's that's when this effect is going to get fired so let's just make sure we have a reference to the auto complete okay once you have that then what you can do is you can say autocom complete. add listener okay so there's different kind of listeners the one I'm interested in is Place changed okay and then this is the call back function now how did I find this well just reading documentation honestly uh that's how you're going to get it so what I can do is I can say const place is equal to autocomplete do get place so you can get bounds Fields but I'm just going to get the place and this for starters let's just do console log Place let's just pit it out and see um what the heck is going on all right so have console I'm going to refresh this and let's say I'm going to do Niagra false boom there you go so remember how we remember here how we limited it to only uh the address geometry and the name well there you have it we only got three Fields so this going to definitely save us on the bandwidth and the billing cool so now that we have that so I'm going to close that and then what we can do is I'm going to minimize this just that and then what we can do is we can basically say set um Place selected what was it Place forgot what we called it uh selected actually it should be set selected okay so let's just get the naming right this should be selected place okay um yeah so set selected Place selected place and then what I need to do is I think yeah I need to fix this and then here I'm going to do set selected place all right so what do we say we say place and I'm going to do uh formatted address okay and let's just do string cool so now uh if I come here and I say Niagra boom Niagra f is coming here that's so cool all right so that's the address coming up uh let's just do something else CN Tower cool so you get the full address y Tower that's coming up that's the formatted address all right I'm going to come here now we need to get the position so I'm going to do cons position and where does that come from That's from the place geometry okay and then that's going to be the location so that's coming from here now if we have a position okay then we need to um place a marker okay and then how do we do that well we need to create a function for it right so I'm going to come here and we're going to create a function let's just call it set marker all right and that's going to be add a location which is of type google. maps. lat long okay and then name whoops like that all right so let's be safe and what we can do is let's say for some reason the map is not initialized and just return there's no point otherwise what we can do is map. set Center okay set Center and then what we can do is we can say location like that okay and then const marker okay new google. Ma ms. marker okay this one and we're going to do Advance marker element like that now it's attached to which map well the map that we have where do we want to place the marker position okay I'm going to do location and then what's the title okay and I'm just going to say marker like that all right so let's save this and let's refresh I'm going to come here so here I am uh to where am I so this is looks like yeah CN Tower let's jump to somewhere else so I'm going to do Niagra Falls okay and it looks like it did jump so if I just uh oh no actually it didn't jump as you can see we're still at see in Tower okay let's try something eaten Center right so it looks like the map is not jumping oh I know why we're not calling the function so I'm going to do set marker and we're going to do add position and then we need the name so that's going to be place. name okay and let's just do this cool all right so let's try this again so I'm going to do Niagra Falls okay I think I need to refresh okay Falls aha there you go so it jumped so if I zoom out there you go we're Falls so let's jump to eaten Center Young Street there you go we're on eaten Center if I zoom in that's eeden Center so cool so this is working um then we can also show a card so that's going of display the name of the place and for that we will need the info card thing so we did that in the in the previous tutorial but anyways we'll do it here so I'm going to do info for the content this one um I'm just going to use from my previous example basically what it is is um we just it's a div and the class is um this class and this the title and the body so I'm going to copy this and what we can do is come here and I can just pass in the name for title and the body like that so I'm going to save that and finally you want to show the the card okay and the map is map and anchor is the marker all right cool so let's refresh and let's do FS how cool is that we're showing nagra Falls so uh and then here's the you can put whatever like the their phone number reviews and actually you can get photos as well so you can do a lot pretty much too much too much with this now one thing is you can see the title bold as you can see we have the map uh info card and the way it works is you can then in your Global do if I can find the CSS file I have added this and that's how that's what's showing like that so just to prove my point I can for example do color and I don't know let me just do blue okay and there you go so the color change just to show you that it's there all right so I guess uh let's recap what we covered so we covered how we can or do Google Maps uh this kind of different way of doing it than my previous tutorial and and then you also learn how we can do the auto address auto complete then we learn how we can get the enable the places API and the places new places API get the API key and we talked about the security of the API key and then also then we talked about how we can do a search how to um have the map point to the location of where we want it how to do in a listener when place is changed and um also how to load the maps Okay so this will be used in the project that I'm working on it's I'm still actually doing this it's coming up and it's going to be a pretty in-depth and intense project so I hope you guys stay tuned for it uh as you can see it's by the way responsive as well so yeah uh like And subscribe and I'll see you guys in the next tutorial

Channel: Grepsoft

Views: 2,959

Keywords: Next.js, Google Places API, React, Javascript, Location Search, API Integration, Maps, User Interface, Developer Tutorial, Web Development, address autocomplete, address typeahead, google maps api key

Id: 6wo9xKOZCcA

Length: 33min 58sec (2038 seconds)

Published: Thu Apr 25 2024