#1 Google Maps in React: Autocomplete Location Search | Draggable Marker | Marker Infobox

hi guys my name is Imran and in today's tutorial we're gonna cover how to integrate Google Maps in react how to create from Shanti is like autocomplete location search when you drag the marker then you should be able to get the location and it should show a marker info box as well on top of the marker so all of these functionalities will be covered in this video I did a lot of research I watched a lot of videos and tutorials which explain how to integrate Google Maps and react but none of them actually were successfully able to explain how to use autocomplete location search drag a blue marker and mark infobox in fact I have watched a video which was for four hours but it still didn't cover all of them so I thought that since I've already spent so much time in going ahead and integrating this and doing all the research I would save time for you so that I can get you all this information all in one video and that will be really short ok so as you can see that this is the map i've already integrated we've got this marker here then you have the enter location so i can do an auto fill option so if i have to search own name and let's say i click on this area you can see map is automatically move to that location and you can see that you've got one international airport area all of that information and these fields are already filled so in case if you are creating a project which has a form which has these fields city area state and address you can get all of them this information in this state and then you can go ahead and submit that in in the form okay and you can also drag the marker so let's say if i drag it like this you can see now it's moved okay and it is also showing ahead and then showing it is going out and showing this a particular address okay so this is what we're going to learn we learn how to go ahead and integrate this map how to show it we will what we will not learn is how to create an api credentials there's already a separate tutorial for that I will leave a link down below in the video description and you'll be able to see that and learn how to get the API key because all you're going to need is just the API key okay one also one one other problem is that and the state of the component gets when Emma gets changed then the company gets rear-ended which means map is being called map appears being called several times because of which sometimes you know the Google might block your API you won't be able to use it for that particular date you will keep getting errors like you know your you've exhausted your number of requests for that particular day so to avoid that I will also show you you know what what are things you need to take care of okay because this is one of the challenges that most people face okay so I'll take care of that so let's begin coding then okay just before we begin I have already written a blog on this step by step which has got all the codes you don't have to really type anything if you don't want to you have got all the quotes available so I've explained everything step by step you will also have a completed code available on github so you can go and github and you can take it you can install a boilerplate and then you can follow along with me or you can directly go on to the link that I'll provide you forget um which will have the completed code for this particular project that we're doing okay alright so let's continue so what we're going to do is we're going to use the NPM modules which is of course the react we are Google Maps we are Google autocomplete this is for autocomplete location search and then we are geocode to get the location out of the latitude and longitude okay so first thing we need to do is install the boilerplate in case if you already have a project and you want to just use in your project then you can skip this installing this boilerplate part but if you're just testing and just want to test it how it works you can actually go ahead and clone this particular repository react node wallet plate so that you can follow along with me okay so let's try now so I'll click on clone and I'm gonna go on to my terminal okay guys so say git clone and I'm just repository joining that okay it's been cloned they're just few steps will take to ensure we clear the cache so I'll just go over here okay so we are into guru we need to go to the root directory first just copy paste okay now what we need to do is we need to clean the cash in to the root directory okay and post this we need to into npm install so it can install the all the dependencies okay and then we need to go to the clients folder and then do the same thing there as well we need to clear the cache and clear the cache and then again after this we need to do npm install here as well okay so once we have done that then we need to install the react Google Maps for Google Maps then react Google autocomplete and react to geocode NPM modules okay so we have to install these three into the clients directory so you have to make sure you are inside the clients directory I am already inside of this directory so I don't have to change that so I'll just copy this it's still still downloading installing so I'm sure possibility while I test done okay so let's paste here and install it okay so once that is done guys we just need to open this project into and any in any of your code editor that you're currently using so let's go ahead and open this cheer boilerplates up here is hope you guys so I have opened this particular boilerplate okay this my clients directory and source component and currently I just have home dot yes which she doesn't have anything okay so we need to create a component called map dot C R so let's just change this to map rename it to map it's not giving me an option to change see oh okay so just create a new component with say map doors yes okay so map dot yes okay also important yet and component from react okay then components okay so let's name it as in fact I have already written it so I'll just copy that to save time okay and I'll have to import the in fact I just have to write confident over here just one moment okay guys so now we also need to import the big Google Map google map with script RTS and all of this on top let's do that so with Google my Google Map it's George yes info window for info window of the marker and then marker all of this information it import okay and we also need to import the geo code from react to your code okay so this is going to help us get the city state address all of that information from the Latin long okay and then we also need to use the API key okay so you can I'll leave the link for the tutorial - how to get the API key from Google Maps API okay so you can just put that your API key over here okay just leave some space Oh all right so what I'm gonna do is I'm just gonna copy this whole thing just to save time otherwise it'll take really long time okay and you also have to use a geo code enable debug if you go on to the reality of code NPM module okay you'll be able to see that you need to follow these steps to be able to use the geo code okay so that's it let me explain to you what's happening over here so I have a constructor method defined over here inside of which props super props and since you already must be working on we actually already know this then we are setting the initializing the state we are setting the address City area state to blank right now to null right now sorry an empty string and then we are creating a map position okay property and setting that to this object containing lat/long okay all of that information because when we import this map into another component then we will pass the lat and long from there okay then we have marker position which again will be equal to this this value of the map position okay then what we're doing is we or okay let's ignore this part let me just go down okay what's happening here okay so in the vendor function what are we doing so we are saying constant async map with scripts yes which is what we imported on top which crypto-jews from react to Google Maps okay and over here we're saying with Google map again that's is this is also being imported on top from react with maps and props and this is Google Maps okay and we're passing this dot props at Google this is basically all the syntax that's provided to you by Google Maps on the npm module if you go to the end model of Google Maps just copy pasted from there okay so yes if I want to show that to you or to show that you quickly okay let's see react Google Maps and p.m. okay so you can see that it has all the documentation of the installation all of that part let's see installation okay so you can see you have default Center you have props all of this information and so I'm just using that I can move so this is default Center where the map will be by default okay and then we sing let map okay and if if this drops are centered on lat is not defined okay is not equal to undefined then show this which means once we've got the lab position center position only then go ahead and render the map okay and these are just for input fields have great cities area state and dress so that when the position of the map changes we can fill this information the city address area all of that information into these input fields to show and displayed on the computer spring okay and we remain doing async map then we put in Google Maps a URI which is again the information then you will see somewhere here okay I'm just after search where it is here is okay as you can see Google Maps URL and all of that information okay then loading element div Styles all of that syntax are followed that okay and then finally otherwise if do you haven't got the lat and then map is equal to just a div and the height okay alright and then return map so that's how we've got the map and then we need to import it so let's import it into another component so that's important into home dodge yes okay so we'll say import map zoom it from map towards yes okay all right and spot okay okay so inside of this component I'm just going to go ahead and use this map okay so I've set Google and we setting the value to this or props at Google Center is this height is the height of the map will be this much zoom will be this much okay so let's go ahead and see if it's actually working so far okay guys so we were in the clients directory you think yeah yeah we were in the clients directory right so what we need to do is you need to come out of the clients directory and get into the root directory and just run npm run damn it okay so this is my custom script to run concurrently which means I'll run Dino GS server as well as the react server together how we don't need the anything else right now we just want to display whatever we got in a component onto the screen so let's see how it goes okay all right great so that's perfect guys you've got the city we've got the area State address and we've got the map as well so so far we got the maps what we need to do is we need to get the marker we need to get the search box for autocomplete and things like that yep great let's see so I think we should just give it some style we should not write an inline style but just for demonstration purposes right it margin let's put the margin as 50 pixels for this okay let's try it out yeah listen much better great okay right guys so coming back so if we what we've done is we've created a map component okay we have imported the okay just change this part okay so we have imported the with Google Maps Google map with scripts yes all of that firm they'll react Google Maps we have got the geo code we've got the key we've got everything set up we've got the constructor function we've set the state we have gone ahead and created these fields for City area stayin at rest with these input fields have been created we have got the acing importing this component as map we are then importing sorry exporting this component as map and then we are importing it into a home Godsey s file which is a main file okay and we are you know importing it as map we're passing the center and the height information from here okay so this latin log information will be available in this state at this point because this blood prop start center dot lat will give me in that information okay great okay so the next thing what we need to do is just want to show it to you what's going on over here okay so what were you doing over here with things should component update so this is what this is the problem I spoke about at the beginning that if you don't use should component of update then every time the user entered something enter something into the search box then the state will change and component will rerender which means the map element will be rendered which means this API will be called and then at some point your API can be locked okay so to avoid that we'll use component sorry should component update per second here is okay and then we are checking if this dot stayed at marker position not lat is not equal to this don't prop star center dot that which means that whatever marker position we had said earlier on top over here which is actually coming from here okay so whatever props you were passing if it's changed only then go ahead and you know update the component so it will return true if it returns true which means that you know it should go it should you know proceed basically sorry yeah the component should get updated if this returns true this function returns true if it runs returns false which means component should not be updated okay again we're checking of this not state dot address is next state or at rest which means that whatever the state value of address city area and state was earlier if it is changed only then go ahead and you know render the component okay so that's what we checking over here all right perfect then now what are we doing over here that may explain not okay so component did mount once the company's mounted what we are really looking forward is to get the address and only then we will be able to fill all of this information which you can see currently it's already filled okay so in order to forget the because when the component is loaded all we have passing over here is just a Latin long okay so currently this is propone II so we are passing this information but to retrieve the city state address area all of this information from Latin long we're going to use the geo code function okay and this is the function we're using from Latin long it takes the latitude it takes the longitude which is the same as the center position of the map okay and then dot then we get the response piece and if you get if you just console the response I'll just show you we get just respect element so you can see in the response we've got an object it is got result and in the result you have address component and you have formatted address which is the entire address and then you have address component which is got the city state North animation so what we are basically interested in the first thing is you address so you can see response dot result or zeroth element which is the first element formatted address which is this is gonna get me the address right yeah you want the address and in the second one you've got the city so in instead of you know writing all the codes here I've created a separate function for these to make it more simpler for better readability as well okay so we're calling this function to get the city area and the state and we're passing the address array so address array is equal to response what result or address components so let's see what we got an address component so here it is you can see that this is the address component you've got an arrow of the information which contains the city state then call all of the information so I'm just passing this eraser array so let's have a look at this function so glad city gets in this particular array which is address component array and then we are looping through this array okay and checking if the type is present and if the type is equal to administrative area level two so you can see type is equal to administrative area level two so let's see so what are we looking for we are looking for City right okay so I should give it somewhere here you can see type is equal to administrative area level 2 which means if this is the case then get and then that means that this particular item has got the city okay that's how we got in the city is we getting from long name as you can see long name is Tony similarly you have four area we checking if it's up locality level one okay or if it's locality then that means that it's the area okay so same because if you find in this area you will be able to find it you can see sub locality and all of that is present okay similarly you will have get state I'm mister D very level one will be state and then you have the yeah that's it okay so we get the city state address all of that information here okay and once that is done and then we will set these value to this state okay so we'll set the the state values of all of this to be the address area city and state okay and otherwise we'll console.log the error right perfect okay so I think that's pretty much it unknowns okay the reason I'm using this unchanged over here because you know whenever you define any input element without an unchanged it is gonna throw an error it is not doing much but yes it is required to fill the city state in address inputs over there okay but I put those things as grayed out not allowing the user to enter it manually because if he enters incorrect spelling then it will be a problem so these are grayed out this is just to show that we are actually getting the city area state using his address okay so in the next I don't want this video to be too long guys so in the next video we're going to learn let's see what we got alone so we will learn autocomplete location search and draggable marker and mark or info box okay so so far we've learn how to load the map how to get the city address state etc from the Latin along and in the next video we will learn the less good thing guys Syrian moved away

Channel: Imran Sayed - Codeytek Academy

Views: 58,806

Keywords: google, google-maps-react, react-google-maps, google maps, google maps react, react google maps, node, node js, mern, express, mongodb, autocomplete, location, marker, map marker, git, medium, drag, draggable, search map

Id: 4z4hxEHlsxc

Length: 25min 49sec (1549 seconds)

Published: Sun Nov 04 2018