React JS PROJECT - GOOGLE MAP BASIC

hello my friend Oh today we are going to make the application with the Google map API we read just a deal with the basic feature with the Google map so if you see what we are going to do first i refresh the map automatically this map we get my current location and then if we try to drag the marker we can actually drag it like this and we can also get the different place the address and the area and state we can also search for the a place where we want to go like I type this Washington we can just automatically come in here and there we can also made use of or the basic feature that Google map API key bus like click the free screen or just go to we can also Jim and by clicking marimba and there we can do the set line mode like by clicking this one and we can try to put the person in here to see a rear view like this yeah just order basic or Maps Fisher so we can do even though you can see this one it's really simple but when I implement this one actually it to go cut a long time because I got a lot of errors of making this one so and anyway yeah we are going to make this one so now if I summarize what to learn in this video like just a basic math feature and how to drag the marker to get the location and how to go to the location by searching autocomplete and how to get the city in areas and states name and lastly how to use google map API so without further ado if I just start making that applications so first we need to do the configuration for the Google Maps API so we need to use the API the Google provides so to use that so we actually need to download these three mode really Google Maps and really autocomplete and then react to your code so if I first explains the each of these purples so first the further google a real google map this is just a further basic maps so if you see this just this map to make this basic map or we need to have this real google map so if you see this definition for the real google map real Google Maps provides or set up the real component wrapping the underlying Google Maps JavaScript API for instance so after that viewers need to download this real Google autocomplete so this one is for the this all to come place so if I type the also so like this you see if we type something that we can get some other suggestion so this autocomplete function we can get from this real cool autocomplete and then lastly we also need to react geo code or if we just this definition a module to transform our description of a location into geographic coordinate and vice versa so by using this reaction code first we will be given some latitude and longitude when we should this maps or without the latitude unload it use this map doesn't know where to show so with the latitude or longitude or we will transform that one into the address or the area or a stay so we will know that these are places named like every iron state and address so that's why we need these three modules in stores so to use these three modules we actually need this API so before getting the API first we are going to just download this three module but we are going to so we are going to use the reality as for this application so first we will create the real application all to do that first we go to the directory where we want to download art react application and then make the folder and then you can keep this further name anything you want to so for me it's the react google map and we can just a turn on the text editor stuff for me the bigger studio could because I really like it and then drag the folder into the text editor and then in here we turn on the Terminator like a new Terminator here inside the Terminator you are going to create the reallocation by using create react app so to do that type the MPX create and react an app and to download this great react app in this directory so we are downloading right now so now we have the real application and then so now that we have a real application created so now it's time to download these three modules so come back to our terminal and type NPM is to Korea geocode and three google photos complete and read google map and say so now we have downloaded other modules so now it's time to get the API case so to get it or we need to visit is Google website the concerta cloud google calm Gogu Maps API so are we visiting here so first thing we need to do is we need to create the project new projects so if you come in here so you can just type any name you want to have for this project so for me just google map and I will click the Create it takes a couple seconds to create this project so now it is created so if I click this view now as we are here and then we need to click this hamburger button and then go to this API so services and then click this credential tab so in here we can just get this API key so to do that first click this create credentials and then API key and so now we got the API key and here we can also trick this key for better security but we are not going to do that right now so close it and then if we come to our diagram to know what we need to do next so we actually need to enable API Sweeney so there are three API is we need to enable so just briefly we can understand like these to use this red cube code or module we need to enable this geo code API because what this API does is not your code is the process of converting addresses into geographic coordinate so as we said before this real chill code does transfer form or description of a location into geographic coordinate so it does the same thing so so to use this module so we need to enable this joke coding API and we also need to enable or Google map API for this real Kupa maps and we also need to enable this place API for this our real Google autocomplete module so we need to go back to our website so go to the library and it's the place where we can enable the API so you can see or there are so many API the Google provides there really a lot so we can use order API is in here so but now we are dealing with the math so inside the map so we can see it is a mess JavaScript API so we click it and then this one is pretty maps for your website so ready to enable this API so now we just enable this is AP is nice time to enable this geocoding API so come back in here and click the api's or we can click this at your coding API you can see this one click this one and enable this one as well you lastly ready to enable this place API as well so come back in here and click this API so again and then you can see this places API free and then click enable button again so now we have all the API we need enable so there there were so many configuration ready to do to use this on Google API right but we still have one step left for using this one the last one is the before you can start using the Google Maps platform API send SDKs we need to enable billing on the Google cloud projects so if you see this you can just ask yourself so do I need to pay for this API so actually I say yes you need to the good thing is our Google provide us a two hundred dollar three months we usage that means if we just use this one for the education point post you are never going to pay for that so I never pay for this even though I use this one for a long time and I assume that you will also not pay for this if you just use it for the demo purpose so to just enable is a billing we need to go to here so concert up cloud up google.com projects are weak on this page so in here first we need to select the project we just created so for me the real Google map test so again or like if you never the trade the building of town you will face some page you need to put the credit card information or some of the more information you need to fill out so I hope you can just follow the steps it will be really straightforward but for me I already created a building account so I just skip all the steps I need to make for that one and I just come in here so finally we did every configuration for this or Google Maps API and I just take the rest a little bit and then in the later esta we really just to make our application for the Google Maps thank you for watching this video and I hope you can take a rest a little bit too and then see you soon thank you so first we really like this map part so we go to our text editor in here so first I'm going to turn off our applications by typing MPM run start so we can see our application like this ready to change this one into like this so first to help this map we are going to look up the documentation first if you go to this website Thanks I will click this one and going here so we downloaded this education redownload it is a real good maps modules so we will see how to use their brilliant Google module there is some steps over how to use this real cool man so I'm not going to explain everything so just I'm going to screw it down first and we will use this one inside the with script Jes so we will bring this one so copy and then by going to the FKS and here this part is for the disk paste but we don't need this one and we need to change this one into like this so we will just delete all of this part and I will use the class component for this one so change this one into class component so and then we need to extend and react and component like this and then plus compounded render method let this written part like this and just and Eve hello and then just save it and come back to our application you can see this hello in here and then go back to the documentation part and we real just import this part manually so to use this real Kupa map and then we also need to separate this part inside this render method and one more thing we need to bring this part inside of this return like this and save it and then come back to our application so now you can see this map but we cannot see this map correctly now to serve this problem so we need to put the API key we got from the Google API or put in here so we have just incorrect API key right now that's why we couldn't see this map correctly so we go back to Google developer website again here and I will copy the API key and just paste it in here and delete it and paste it and then out real just a savior and come back to our application so now we can see our map correctly while you could come in here so there is a hu or C it's a higher order confidence the regions to user for this map you could come in here there is a widget we scripted us and with google map so both of them are the higher order component the reason why we needed to use these two are offer this with google map so in order to initialize the my map component with dom instance or we need to flip it with with google map hoc and we also use the rip script that is the reason why we also use this one is the in order to correctly loaded Google Maps JavaScript API three three so from now on and to keep making this application up from here on to do that we need some state to change our value inside our application so first I apply explain the table stays in here so address is the first is this address this series and area and state they are almost same as this address just to express where we are from British cities we are in the map like in here you can see the area and city and then state so we need to have this value inside a state so for it is tomb now we have the 15 as our default value so if I bring our original application you can see we put 15 as a tip for true or if we just change this run it to 10 and then come back to our original application now we will change this gym into ten so we can have all whiter the map right now like this and the height is further like if I give the 704 the high now it becomes taller like say 100 pixels for the height and I change this one into 400 again and we will also help the map positions that and the marker position micro-operations is free you can see this marker or where this marker located so we need to specify the latitude and longitude where this marker is located and for the map positions just aware we are inside a map so if we want to change this of maps location we can just give the different latitude and longitude so just a little way you can just see this one is for the main position and this one is two so for the marker position so we need to keep this one the state like this first one is the address for our address and then City area and state [Music] we give to 15 and so default and height will be you can give any picture for this ones but for me I will give a 400 and we also need to give the map position and inside map position we need to give the latitude and longitude and we also have the marker position and give the latitude and longitude after them we also want to make this the info window what this with info window is if we see you can see this window here is above the marker so to have this one we can import that component then even for Bindo from the reaction Maps module and we put this one inside of Barker so marker and put it in here and inside in here we can just type on anything hello just for now and go back to our application here we didn't I didn't put the comma in here and put it again and come here now you can see all we have this info window here so if I click this one oh we can just close that too so next thing I want to do is we want to this marker draggable so like if we want to drag this marker in our original map we can do it like this by dragging the marker or we can get a new address and area and stay but inside the map we are making right now even though we try to direct the micro we couldn't do it just a bad positions or is changing but we cannot change the markers position so we want to do that right now so to do this we need to add two attribute for the micro component this is a micro component one is the draggable and we put on draggable we give the true for this one and the reals I need to give the on-track and attribute or we also need to so when this on direct and event happens the way we triggered on marker thread and function so when we finish on dragging so we need to know where this positioning so by using dysfunction or micro drag and we will figure all the place where this dragging was finished we are going to make dysfunction in here like this first we will get the deep end inside this even and let and long and if we do like this and we put this value inside of variable name the new let first I'm going to let you see which kind of value we get inside this new blood variable so the console law and then you read and you save it and I'm going to just drag this one in two different ways so you can see so up do less variable has this value so this value in the case these new markers latitude and if we do like this let you all longitude and event and let long and and G like this or inside this new longitude variable we will get the value of new longitude of this marker so now we have this new latitude and longitude the value after we drag the marker so how we will use this new latitude and longitude so by using this ability and longitude information we want to know series name address name and city name and area name and state name but by using this overrated around it use how can we know this address and city and area and stay so to know them by using this one so we will use this the dis geocode so like we download this abreact geocode mode so before I said by using this one we can transform or geographic coordinate into a description over location so by using this one or we will know this information so first we are going to get that information by using this latitude and longitude so to do that first we need to import the a reaction code pretty import or geo code or from react or geo code and then to use this one or we also need set the API set API key this one is same as this one wake up from the Google so put this set API in here so now we are ready to use this geo code don't worry how to get the locations address and city and area so we put the joke code in here and then I'll use the from already too damn long get here so we put this all edited first and from latitude and longitude and we also put up longitude we reuse the promise here so this is your code we take care of this latitude and longitude and then this one will give us the response and we want to know of each panel for information we get inside this response so we will do the console wall and go to our website again so now I try to drag it so now I got the response back so if I spread it like this so we can have lots of information about this location and address so I record inside the address component can see this address and in here permitted address so by just copy and paste in here so we can I'll get the address for this location so by using these informations we got from the geo code so we will put them all into the state so we can populate area and state and address information like this on browser so that's what we are going to do so after or drag the marker and we will put all other locations information into state so to put the information into stay very first I'll get the value address oh this one is response and Richard and zero and prove Mary or the rest because a Richert readers on index j ro and then firma dated address this one formatted address this one is address and then the rest array so nice response and Richard zero in that and all the press component this address company we've just seen this one and this one this one so by using this address of array we can get city information by using this get city or we also need to make this function up here the Placer array okay so we will put this all to rest all right in here and first I will put all the bed or the variable here city and area and this get area and address sorry again and lastly the stayed and this can stay don't arrest oh no not this this one that this one get steak and or dresser area and this one is get area now we don't have this function yet but we will make it manually so in here because you see there are so many information so we don't know which one is the city which one is the area and stay we need to get the specific the city and state or that information in this variable that's what we are going to do in here to get the city information from this information so first to set the city variable as a empty three and then we redo for for over and like this and this one will be addressed array and their lens and index I will just tell it this one and first gift addressed array and in that and types index 0 and if we have power to mainly set to late tip array area and level and to is equal to the order s array and index and types and 0 address array and index and long name this will be the city like this so address in in type-0 if we have this one okay weed control so if you see here like address indents and type zero so this one has come component and index 2 and types and ties and 0 if this one is the and we if we have this one right now we have this one and then if this administrative area level 2 is or same as this one but this one is not same so this one is not saying yeah this one is the same so if this one is same this long name is the city so now inside this in that this one's name is the long this one so you just just liked it so this name will be the city's name so we got this city's name from the our latitude and longitude so by using this way or we also get so areas name and then stain name but I will do really fast because it is not the very important right now so by doing like this we got all the information about city and area and stay so now it's time to put this information inside the state so to do that we reused assessed stayed and first inside address date if we have address we will put the address in here if now be ready just to make it empty and for an area to area if we have area we use the area for the state and then if we don't have and we will purchase empty string and same as the three different things and for micro positions so latitude and want it here first and latitude will do latitude and long beach you may be new longitude and for the map position this might be same as this one like this but change is twenty two met position I have three we like the I is undefined when ah this one is not the I okay this one needs to be the index okay I have to redirect this one in two different place but this is not movable right now because the we did a hard coding for this the latitude and longitude like diploid Center so we need to change this one with the state so just delete this one this day if we go all this one is submit for this and let it you bad position and latitude even further longitude for the default Center this stale and bad position and longitude and even for the micro position we get the same value like this but this one is to be changed into the micro position yeah micro position here yeah put the micro position in here so they're really really okay really I'll try to drag it into here so now we can actually drag it after dragging it we our map position has changed so turn to this we actually want to the displayed like this information up here so to do that first we need to get this UI part so to get this UI or really quickly and easily we are going to use the end to design of framework so I'm going to download them really fast so MDM is to and to the end and save and then I will turn on my application again NPM run stars now that we downloaded this entity sign module so if we go to into design website so there is a descriptions or components in here yeah this one we will use this one so if we click this one to show code so we improve this a description or component in here and we don't need this patchy one only with this description we copy this one first and we put that one in here so give and then we get this one and put it in here but mostly we don't need so we will just do it follow this car and we just save it and come back to our application now we also need to improve the Austin State from the end design getting started so this is ties it on inside index dot JSP put that one in here and come back to our application we can see this description part so we will put that all like a city and state and area and this kind of information in here instead of this information so we don't need this user info up here we will put the h1 and Google map basic and then we just do some styling padding and one RDM and margin and zero and photo and next we'd always be just a thousand one thousand and for this one all this money for the city and and then this one will be the area information and this one will be state and just want to be free the address okay like this and we don't need to spark so to video and if we come back so now we got the different key so we also need to change this belly part for the rear city information area information so but real information is in the stay so we put the state in here so this state and see this state and area and this state and state and this state and gone to the press so now we say B so now we don't have anything because we didn't do anything like we didn't do comparative mount after rendering our things into the dome is really didn't do anything so but if we like drag this one into different place now we got the city information and address information and state information so if we couldn't get any information for the area we just to make it empty so we change it again so this one has changed it again so the next thing I want to do is like if you see this autocomplete part lighting I want to go to San Francisco so by typing and then click it so that I come into San Francisco so I want to make this form this feature so to do that we come in here ready to imprint the autocomplete components up in here and invert or to complete from this real Google autocomplete and by using this autocomplete okay we need to put that component inside in this google map Motul complete and like this just a Sabian come back to our application just here now we got the autocomplete box in here is not a pipe like the Washington yeah we can actually so we got this autocomplete a Richert in here but this styling is not a grey so we want to give some styling for this order complete so which will be the 100% and then the height will be the product or pixel and the padding web heading left maybe 16 and the margins top 2 px 2 and margin bottom sorry M like this so we come back here so we got the better styling of this autocomplete box and next we also need to give the props or name the just this one types types are we need to give the regions for this type and this types prop means on type of place in Google play's API we enable this Google Place API before so we come to our applications so we can get the autocomplete widget in theory or even though we just click this one and try to enter it but nothing happen in here so when we drag this one in here we got the new Richard from the a dragging the marker or even though with time editing is nothing happens so how can we contrary so we also need to give this some places selected the props to control them so I just copy and paste it in so we will see so which kind of value are inside in here we we see that it's come back our application and Washington again so now we get the lot joke lots of information back like the address component y cube metry so you remember we saw this information before when we track in too deep or any other place so when we direct this one from here like from here we also that the same information so after this on place selected event happens are we with trigger this on place or select it a very very trigger dysfunction up here and we really get the place or information bad so what we are doing here is almost same as this part but before we use the geo code to get the place information so we also need to set the variable for the other s in city and area like this in here all the all the rest and place and permit it address because you see it you know this address at this one is a displace this one is place and then address a formatted address for reading address is like this and array like disappear place and address component this one address components or this part will be exactly same as this one so I do fast we also need the latitude of value and longitude value so this one is a place and Jill met three and location and left and let longitude value and place into the tree and location and loaned each it like this so after are getting all the information we need and we also need to set state like this we just copy and just paste it in here like this but let okay just we change this one oh why I just give the latitude for the wrong with you I need to change this one my mistake and then so long beach's longitude and oh oh we try to type different place maybe all we do want to go like okay looking good Canada why so okay I got errors location of undefined here's I got the typo issue it has to be cheapo met three not too Marty Geo Metro Man 3 okay again so I'm gonna go to Canada again so now I can I'm not sure whether this place is Canada or not oh maybe I go to this Seoul where I'll leave oh yeah we got the so avail and then we also got address and an area and state well we did almost everything there is a one more team want one more lasting I'm to do is the so after i refresh the pace I want to show the man over where I live not just this place or to do that we are going to use the geolocation API that is provided by the Web API so by using this geolocation API or we get the current locations so whenever we come to our component after rendering this part or we restart the a life cycle by using component did did mount and in here we will use the geolocation API so to use the navigator and so there is some browsers we can use this geolocation API but maybe we couldn't do this one just in the Internet Explorer I really hate this one so aside from the Internet Explorer version lines so we can use this geolocation API so if we can use the geolocation API and we reuse the navigator and kill location and then get current position and we will get the position here and after this one we can get the current locations of our latitude and longitude so we really first to put this value or in the state so map position are we just to bring this one and like this position but this won't be just 0 and this will be the position and 30 days and 32 and this pretty strong position and coordinates and longitude longitude or even freedom marker position we put this right here so after we change the state what we will do is okay what we will do is the same as this one so using the geocode component and we now already have the latitude and longitude or we will get this series name and areas name is taste name so but we don't miss this part because we have already changed it so so let it here in here and don't get too in here so now I can save it and then go back to our application and now it required or to allow to let this project know our locations yeah so I wait I need to click this allow and I will refresh the page so now I will refresh the page now I got this my location then just any other random place so now like this I actually finish this tutorial for the Google map AZ I thought I'm going to finish this tutorial just in 30 minutes but it doesn't have to be this long tutorial sorry for that maybe I tried to speak faster or I try to minimize the procedure of how to do maybe because this was not the very like complicated the projects but anyway just uh thank you for watching this video - and then I hope I can see you again in my next project or sincerely thank you for just a kid watching my video thank you

Channel: John Ahn

Views: 27,932

Keywords: Google Map, ReactJS

Id: Alz13kGluL8

Length: 52min 31sec (3151 seconds)

Published: Wed May 20 2020