How to Use Google Maps API with Next.js, React - Including Places Autocomplete | 2024

hi folks in this video we're going to build a search location address using a library called Rea Google Maps and also next GS as our main client without any further Ado let's jump right into the project for the first thing I will create a new project you can give it any name but I will give it next Google Maps and you will have a different options to create this project but in order to make this video just easy and also faster I will not use typescript I will not use Aslin but I will use TN CSS because this is important where we will customize the Google Maps component later so I will use yes and I choose yes yes and also yes and after that you can open the project using your favorite code editor so I will use [Music] csor and yeah this is the FR project and after that I will create a new file which is the environment file and I will give it a name next Google Maps API key so this is important so in order to grab this key you can head over to the Google devop console and after that just go to keys and credentials and create credentials and choose API K because I have one so I will just just passed this I'm sorry I'll just pass into this file okay so the next thing we are going to create a folder called components and also the new files called page. GSX and also the CSS file so yeah I will install the package first by opening a terminal and write a npm install y Google Maps SL API and after that I'm just import it in this component file and I how we import the Google Map marker use load script Circle and the last one is stand alone search box so yeah and also I will import the necessary react hooks which are use memo use State use effect and also use ra so I'm going to import style as well and okay we are going to create a Google Maps and I will receive an argument like radius the latitude because we want to know what are the longitude the latitude as well this is going to be in the page GS which is in the root of the folder I mean in the app folder oh yeah it's auto complete nice latitude longitude and also an we will create a new use state which is this is really essential we're going to give it default a null value and also we are going to we're going to grab the use Lo script API and in here we're going to grab the environment file that we have created before and we're going to input the libraries which places and also we're going to create a Center variable use memo oh it's all complete nice and we're going to create as well the change coordinate this function is reflected when we are you know changing the coordinate we going to set the long it as well and finally we're going to set the latitude to the new value so we are going to put user fact hook as well and we're going to watch it for the latitude variable and also longitude so this is essential because whatever the value change this function is also run so we're going to call the map yeah okay and also we're going to create a variable called input ra let just default it and we're going to create one more function which called handle Place change [Music] and we going to grab the input ra and I'm going to check if there's a place we are going to set the address and also set the coordinate Place dot format set address set latitude as well geometry location and also set longitude and finally we are going to return the component so the first thing we're going to give it class name using T CSS width full and also the height of 96 so we're going to make a condition in this I part so we're going to check if loaded if it's not we will render the H1 heading and if it's yes we're going to render the Google Map component so in here we're going to put some variable like map container class name we're going to give it map container and also Center Center we because we all already declared in here and also we're going to give it Zoom hand and unload we can write another Google Maps component which called Stand loan search box and in here we're going to give it as well the onload which is give us a value of RA and we want to change the input graph by the latest value and also one plus change we're going to give it the function of the handle plus change and in here I will give it a new div I'm going to give a class name relative to its parent and also margin left 48 margin top 10 PX and also width of 500 PX of course you can customize as you wish but yeah this tutorial so I will give it also the input and this is for the search location so we will give it type to text and class name form control text black and also I will give it a background white and this is derived from the argument that we receive from the Google Maps company and also the value of course the address because this the important value and I can give it as well the search [Music] location and also for the on change we will set the address so whatever it changed we will set the address by putting e target. value and yeah we are done with the search input and for another part we need to you know some kind of button that we can put in the corner so we can revalidate our position so we will create one button and after that this the important thing which is the marker so in here we're going to write it a dragable so we can drag the the red one the right position so we can put the animation as well Google Maps animation drop so so this marker is is the the sh the location shape that we can put in another location so if you drag anywhere it will trigger a function and therefore we're going to put the change coordinate function and also for the position we're going to set it to latitude and longitude and last one is circle and in here we are also going to put options this is for styling like fi color I'm going to set to Red ff0000 Z also I'm going to set the stroke Capa opacity I'm sorry 0.8 and also stroke color will same and I'm going to give stroke weight of two and the final value is V opacity 0.35 so yeah we are done with component so we will directly import it in our Pats or our main page so we're going to export first export default Google Maps and yeah we are done so in the next file we're going to change the style CSS we're going to change the app class name we're going to give it height of 100 view height and ALS so the width and we're going to give a same all [Music] value actually this class can be written in the the container itself since we are using the tawin but I will do it anyway and after that we are we're going to head over to the pat GS oh at first thing we want to run the project first okay so we will remove all of these components I'm going to board it first I'm going to head over to the pat GS and I will remove all of the component in here and I will write from scratch first I will make it use client and I will import the Google Maps component that we have right before we will create the stat first so just follow along so I will just use a random coordinate as a default value and also for the longitud as well and we are going to create our component in our main page I will give it class name with full H screen and I will give it a flex and you can just follow along so here we're going to import the Google Maps component and we are pass the variable like address set address and so on and also we're going to give it a class name so we are done and after that we can create new div which is contain a flex column this is this is for showing the result so yeah we are done we can just test it and we're going to run again and see is it work or not I'm going to refresh it oops I think I have a mistake in here so before this we are creating a react and blah blah blah blah blah a variable name so it should be like this so you should using nextore public if not they will not load the API in this code and also before this I will before this I did the height of 96 but I was wrong it should be h-96 so I will save again and look at the address so in here we have a default coordinate that we've said before you can search whatever place that you want this is the button that we are customizing so it works as well so yeah I think that's enough from my video if you like please like button and also share this video if you feel this is really beneficial and I'll see you in the next video bye

Channel: The Dev Corner

Views: 1,143

Keywords: google places react, google maps react, how to integrate google places autocomplete in react, google places autocomplete, react google places autocomplete, how to use google maps in react js, how to use google place autocomplete with react, google maps react js, react, react google maps, google maps api, how to integrate react google maps with places autocomplete, google places - autocomplete in react, google maps api places, google maps

Id: LCaLHBVsgR4

Length: 23min 34sec (1414 seconds)

Published: Mon May 13 2024