Google Geocode API & JavaScript Tutorial

[Music] hey guys a few days ago I released a video on the Google Maps API and a lot of you guys really like that and it gave me some good feedback so what I'm going to do now is go over the geocoding API which allows us to basically take an address like a street address and then send a request to to the API and then get back the latitude and longitude the the country the county basically all of any address info or any location info associated with that address all right so that's we'll be doing in this video let's get started this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time job in the industry to learn more visit dev mountain comm or click the link in the description below alright so the setup for this video is going to be similar to the Google Maps API video we need to register an API key so that we can make requests ok so this is the documentation for geocoding and if we look right here this is the URL that we need to make the request to so it's Maps API Geo codes last JSON and then you'll see this is an address parameter and in this case you're looking up 1,600 amphitheatre Parkway Mountain View California and then you need to attach your API key so let's go ahead and create that first so you need to go to the console developers.google.com/maps project and I have that selected and then I'm going to say enable API and we're going to want to go to Google Maps API s and then click more and you'll see that there's a geocoding API so we want to click on that and then we just want to enable it and then once we do that we should be able to get our credentials so let's say create credentials and we want to see to click that and then it should give us an API key right here so we're going to click done and then we have that in our console we can come back to that in so as far as our project set up all you're going to need is one HTML file so I have a folder called my geo code with one file called index.html so I'm going to open that up and I'm using atom for my text editor you can use whatever you want I'm also using Emmet and let me just go to settings to show you if you want to install that and it kind of makes things easier as far as HTML tags if you want you can just search for Emmet and click packages and that should come up this first one you just want to install that I'm also going to be using atom live server so search for atom live server and click packages and it's this one here by jazz Chen okay and that's just going to allow us to open that HTML file on our localhost on a cert on a specific port alright so let's go ahead and while I have this open I'm going to go to packages Adam live server it's actually running I'm going to stop it and then I'm going to restart it alright and like I said you don't need to have this you can just open index.html alright you'll see it's running on my loopback address on my localhost alright so now what we're going to do is I'm going to use Emmet to put in some basic HTML structure so just exclamation tab and it's going to give us our doctype our head body tags all that stuff and then in a title let's just say I will say my geocode app alright and then let's see we're going to want to I'm actually going to open up the documentation again see I have a ton of stuff open here there we go alright so before we get into our actual project let's take a look at our response so if we send a request to this right here it's going to give us something that looks like this okay which is a results array that has an address components array and if we look in here we have excuse me we have a bunch of different objects and each one has a long name a short name and then types all right now types is just data see it's the type of component for instance this is the street number type which is also in an array because some have more than one type alright then we have a short name and a long name in some cases they're the same there's no short way to say 1,600 so that's the street number if you look here we have the route type which is actually the street name and then we have this locality political this is the city okay they have some really strange names and if we look here we have administrative area level 2 which is the county name I really don't like the way that they respond with the response that comes back and the types and stuff but I guess there's a reason for it because you know some places have regions some have States so they can't just say state all right because it's not exclusive to the US or somewhere else that has States and then we also have the formatted address which is the complete address written out so even if we said you know if we search for just 1,600 ampitheatre parkway Mountain View this will come back with the state with the zip code and the country and all that stuff all right then we have geometry which has the latitude and longitude values okay so we can get all of this info and then we're going to insert it into our web page all right you can also do reverse geocoding which I'll probably do in another video where you can actually put the latitude and longitude and then get the city and all that stuff back okay now before we get into writing our JavaScript to make the request I just want to show you an example through something called postman so I'm going to just search for postman chrome because it is a Chrome extension I believe it's also for Firefox as well I already have installed now you don't have to do this you can just watch but if you want you can download it and just launch it and what we can do is just grab from the documentation we'll grab that entire URL here and then copy that and bring it over to postman and make sure that this is get because we want to make a get request and then we'll paste that in we're going to need our API key so we'll grab that and let's just go ahead and replace that and let's say send and you'll see that we get a response that looks very similar to the documentation response formatted address geometry address components so we want to mimic this same thing in our JavaScript now this is in this API is not dedicated to JavaScript you can you could use any language or any framework as long as you can make HTTP requests you could use Django or PHP frameworks laravel anything that you can make a request with now as far as making the request through our application we're going to use something called Axios okay now you don't have to use this you could use you know standard JavaScript which is kind of long and drawn-out to make an AJAX request you could use es6 promises you could use jQuery but I think that this is one of the easier ways to do it okay so if we go down here you can install it with NPM but I don't want to do that I want to keep this very basic we're just going to include the script tag and then we'll be able to say Axios get to make a get request put in that URL along with the address and we'll get a response and then we can take that response and we can format it so that we can insert it right into our web page all right so that's what we'll be doing so let's grab the script tag right here and go back to our application and we're just going to paste that in right here now I'm also going to use bootstrap 4 so I'm going to just search for bootstrap for CDN and if you've never used bootstrap 4 don't worry about it we're just using a couple things we're going to use the let the list group which is the same syntax as bootstrap 3 we're also going to use cards all right and then just a simple form so I'm going to grab the CDN right here and copy that and then we'll bring that into our application as well let's put that right here okay and then we should be all set as far as as far as the head info so before we get into creating our form and all that we're going to just start with the JavaScript just to make a request we'll hard-code the location and make sure that everything comes back okay so let's go ahead and put in our script tag at the bottom alright and we're going to create a function here called geo code okay and I'm just calling that you can call it whatever you'd like and then from here we're going to make our quest alright so we're going to use Axios so since we included that script tag we can just use Axios and we can say dot get and then inside here is where we want to put the URL so let's go and grab that copy it and we'll go back and let's paste in actually you know what we only want we only want up to the question mark because address and all that depth those are parameters we just want this URL right here okay and we're going to put that in right here and then what we're going to do is have a second parameter which will be an object of parameters okay and it has to be in params like that okay so this is going to take the actual address or location and what I'm going to do is put in let's see I don't want to do this yeah let's let's go inside the geo code function above the get request and I'm just going to create a variable called location and for now we're going to hard-code that so let's just set it to I will say 22 Main Street Boston Mass alright and then inside address we're just going to say location and then we just want to also put our API key so I'm going to grab that let's copy that and we're going to put in key and then just paste that in okay now what we want to do here is get rid of the semicolon and then just do dot then okay and then this is going to take in a function that will give us that or the response from that request so we just want to pass in response and then if there's an error we can do dot catch that will take in a function as well that'll take in an error if there is one okay and you can handle that how you want I'm just going to console.log it okay and then for now we're just going to console.log our response to see what it gives us okay now we just created the function we haven't called it yet so let's just go right above it and we'll say call geocode and let's go ahead and save it and then I'm going to just open up the application you just bring that over okay and open up the console here with f12 and you can already see that we got an object back so if we look at that what we're going to be concerned with here is data so inside data we have the results now results is an array and we're always going to get the first one which is going to be at 0 and then inside there is where we have our address components which is also an array so you can see we have the if we look in types this is the street number we get 22 back because it's 22 Main Street this one here is the street name you'll see four types we have route it's not actually called street name and we have Charlestown which is the neighborhood okay so neighborhood or political I'm not sure yeah I guess Main Street is in Charlestown which is kind of like a like a subset of and then in here and you're not always going to get the neighborhood back because you know most places small towns they don't have the they don't have specific neighborhoods like that and then if we look down here we get the formatted address we get the geometry which has the latitude and longitude so we're getting what we need back so let's go back to our application and what I want to do is start to take that information and create some output so that we can put it into our web page all right so in here inside the dot then is where we're going to be working so let's just put a comment here and we'll just say log will say log full response and then underneath that we're going to start to format things so let's say format or formatted address so we're going to grab that now I'm just going to console.log to make sure we can get it correctly so what we'll do is take that response and then remember we're going to look in data we kind of want to look at the structure here so data results the first the first one in that array and then format it address okay so you need to kind of match that structure so response data results that's an array we want the first one in there and then we want the formatted address okay so if we save that it reloads and we get the exact formatted address all right now we want to output that on to the screen so let's go ahead and do you type so much so much stuff old in here close that up and then let's put that into a variable so we'll say formatted address set it to that okay and then we're going to want to create the output to put in the web page so I'm going to create another variable called formatted address output and for that now instead of using single quotes we're going to use backticks because this allows us to create a template string and we can use multiple lines now for each area the formatted address the address component in the geometry we're going to create a ul a list group alright so in here let's say ul ok and this is a bootstrap class of Lists group alright and then inside here we'll have our Li tag and that will have a class of list group item okay now the way that we can use variables inside the template string is with a money sign and then some curly braces and all we want to put in here is that formatted address alright just like that so we have the output now down here we're going to actually output to app ok so we want to create a div inside the body here too to kind of be a placeholder for that so let's say div and I'm going to give it an ID of formatted - address and then tab okay that's Emmet that's how I could do that with the tab and then down here let's grab that with document dot get element by ID and the ID is formatted address okay and what I'll do here is just say at the end dot inner HTML and then we'll set that to the formatted address output okay simple as that let's save it and reload and there it is alright now remember we're going to have a form later on that we can actually you know put in what we want but for now we're just taking this than address so let's go back and I just want to wrap a container around everything that kind of that pushes everything into the middle this class container is the bootstrap class even have to use bootstrap but I figured I'd make it look decent all right so if we reload now it's pushed to the middle so now we want to go to our address components and do the same thing which is a little different because address components is an actual array this was just a single object that we could output with the array we're going to have to loop through the components and then output each one so it's going to be a little different so we'll go right here and let's say address components so we'll create a variable here called address components and we're going to set that to response data results zero dot a dress components all right and again if we look at the the complete response we're getting data results zero address components which is an array so what we want to do here is we're going to loop through it and then we're going to add each component to a list item so let's start out by creating a variable called address components output and we're going to set that off by being just a ul with the class of Lists group okay and then we want to loop through each one so we're going to use a for loop which takes in a variable so variable I we're going to set that initially to zero then I'm going to say as long as I is less than is less than address component dot length and then we're just going to increment by one okay and then for each one we're going to want to add two this output variable so we'll say address components output and we want to append to this okay we don't want to replace this ul we want to add to it so we can do that with + equals now I'm going to use a template string here because I want to do multiple lines so I use backticks alright I didn't use backticks here I use single quotes because it's only on one line and we're not inserting any variables into it so for this will have an Li with a class of list group item and then here what do we want we want first of all the type I'm going to use that as kind of the title of it of each one so for that let's do our variable and we can say address components and we want whatever the current iteration is so we want to use I right here which is going to represent whatever one of these were on so 0 1 2 3 and so on okay and then we want to get the types so dot types now remember types is an array if we look at it right here types is an array and we want the first one so we're going to say we need that 0 so right here let's put in brackets and then 0 so that will give us the types and I want that to be inside of a strong tag to make that bold all right and then we'll put a colon here and then we want the actual value now you can use long name or short name I'm going to use long name so we should be able to do address components whatever the current iteration is and then we want full name ok that should work long name sorry not full name so long name then we also want the closing ul so we're going to go outside of this loop and then address components output and we want to plus equal on to that just a closing ul alright and that's the full output so now we just need to create a div up here just like we did for the formatted address so it'll be a div with the ID of address - components tab and down here we're going to do the same thing just grab that document.getelementbyid d it's going to be address components in our HTML will be address components output ok let's save that and go back cannot read property length of undefined so see it's talking about right here address components length when they do wrong oh I used a camel case right here the response is actually address underscore components so it didn't know what that was so let's go ahead and save that and there we go so now we have this ul with all that stuff we have the type as the kind of a key I guess and then the value as the value all right and no matter no matter what it's going to even if there's no for instance that there's no neighborhood if we just put Boston Mass if there's no neighborhood it's just not going to show up here ok because it's looping through when it's only going to output what it finds so let's go back and let's see you know what I want to do is just wrap each one of these each section the formatted address the components I want to put those inside of a card which is just a bootstrap element alright so up here where we have our divs let's just add on to that class called card block okay which is kind of like a well in bootstrap 3 save that and then it just kind of separates them so now the last thing we want down here is the geometry the latitude and longitude so let's go back and we might as well just add that div here now so this will be ID geometry and then we'll go down just like we did right here I'll actually just copy this and then this will be geometry and let's see whether they set that variable as so we're going to grab the latitude and the longitude so we'll save our lat and remember that's going to be in dot geometry and just to show you data results zero geometry location and then we have lat and launched okay so that's what we're grabbing so geometry dot location dot lat okay and then we'll grab the longitude change that to LMG and change that to LNG and then this is going to be geometry output and then it's going to be a ul but I do want to Allies one for the latitude one for the longitude and I'm just going to add in a label for them both so strong latitude okay and then this right here we'll just put in the lat variable and then we'll copy that and then this one will be longitude and that'll be the LNG okay and then we just we need to output it like we did the rest of these so that'll be geometry and then we're going to output the geometry output variable so let's save that and now we have latitude and longitude so we're grabbing all of the address info and we're outputting it now if I were to change the location that we're looking at let's just change it to let's just adjust the word Boston and it'll still get us some stuff so if we save it and you'll see it gets to look the city name it gets the county the state the country and the latitude and longitude all right now just imagine what we did in the last video with the Google Maps remember we had to put in the latitude and longitude to put a marker on the map so we could make it so that we could just add a simple city name and then get the latitude and longitude and put that into our Google map application and mark it on the screen okay which which is kind of cool maybe might be something that I'll look into doing all right now let's make it so that we can actually change this inside of a form so we're going to go and go up here we're going to create we just look at the HTML here so we're going to put in first of all on h2 and I'm going to give that an ID of text - center because I want it centered on the screen and we're going to say enter location all right and then under that we're going to have a form and we're going to give that an ID of location form no action no okay and then in here we're going to have an input so I'm going to do input we're going to give that an ID of when I put location input okay so type text' ID location input let's also put a class in here and we're going to give it a bootstrap class of form control and then also form control - LG and then we just need our button so I'm going to put a line break and then we'll put in our button and let's give that button an ID let's see an ID actually it doesn't need an ID so let's just say submit okay we're going to give it a type of submit and we're also going to give it a class of BTN BTN primary which is a bootstrap class and BTN block which will make it a block level element so that it stretches all the way across alright so let's take a look at that so that's good to see so now what we want to do is basically create an event for when we submit this form okay and we're just using plain JavaScript I'm not going to use jQuery or anything I don't want to bloat this up so let's go to see down to our JavaScript and we don't want to run geocode right away because we want to be able to submit the form and then run it so I'm going to comment that out for now so for good actually and then let's say get location form so for that we can do create a variable called location form and set it to document dot get element by ID and as an idea of location form now we want to do is we want to listen for a submission so let's say listen for submit we're going to take that location form and we're going to add an event listener to it all right and the event we want to listen for is a submit event okay now when that's submitted we want to run the geocode function okay now if I save that and we go and submit you'll see it kind of just blinks and the reason for that is because when you submit a form and actually tried to submit it to a web page and we don't want that we want to kind of catch the submission first so to do that we can pass in an event parameter to geocode and then we can let's say prevent actual submit and we can just do a dot prevent default okay so let's save that and now when we click Submit it works now it's always getting Boston so we want to change that so what we'll do is we're going to catch what's submitted in that input box okay so instead of setting this just you know to a string called Boston we're going to set it to document dot get element by D and remember that input has an idea of location - input now if you want to get an actual value from an input field then you want to do dot value or else it's just going to get you this the input tag so let's go ahead and save that now go back and let's enter I will say McLuhan MA so I'm going mass of MIT and there we go so it gives us all kinds of information the city name the county the state latitude and longitude let's say we want ten school streets Amesbury mass submit and it gives us all of that info so the school the street name street number gives us the postcode even though we didn't enter that in here it's still going to give us that address info so it's an excellent way to format an address if you have someone at your website or your application and you want them to enter their address there's no telling what they're going to do they could leave off the zip code they could leave off the state anything like that and this makes it so that it actually formats it correctly and puts it into your database for example so that's another reason to use geo code it's not just to get the latitude and longitude from an address although that is uh you know that's the main use for it alright so I hope you guys liked this project and we might do something later on where we combine this with the app the map application that we built or maybe you could you know take a look at it as kind of like homework and do it yourself and try to figure it out alright so thanks for watching guys please subscribe if you're not please follow me in social media and I will see you in the next video

Channel: Traversy Media

Views: 231,764

Keywords: geocode, geocoding, geocode api, google geocode, google geocode api, geocode javascript, google map api, map geocoding

Id: pRiQeo17u6c

Length: 32min 47sec (1967 seconds)

Published: Wed Jun 14 2017