 Okay, this video is part of a series. This is probably the fifth or sixth video in the series. The first five or six were all on basically shell scripts and doing stuff from the command line to get addresses, maps, location, GPS coordinates. Now we're gonna move on into a more interactive GUI interface that can be used pretty much anything with a modern web browser, whether it be a phone, tablet, laptop, or desktop. And again, we're gonna be using the Google API. All the source code that I make is free and open source, but do realize you're using a service out there that does have limitations and restrictions. But we're gonna work with something very basic today. We're just going to ask the computer for our location. If there's a GPS device connected to the computer or phone or tablet, it will use that to get a highly accurate address. You'll get our GPS coordinates to give us an address in response to that. If not, just like my desktop here, you'll get a general location of where you are based on what ISP server you're connected through. So let's go ahead. This is the basic webpage here. Just have a start button, but let's look at the code before we click the start button. Okay, so here we have basic header for HTML. I'm gonna be using jQuery just to grab some information from the server. You don't have to do that. You can use standard JavaScript, but I just find it easier to use jQuery. And then we have some very basic JavaScript here, not a whole lot. We'll look at that in a moment. And then we have our main body of our GUI here. We have a form, which is basically just our start button. And then we have an empty div tag here called output that we will output our GPS coordinates and our address too. And as you can see from our button here, our start button, when we click get lock for get location, it's gonna run that function. So click and then it's gonna run this function right here. So on click, do this. There's different ways to do that, especially since I have jQuery running, but old fashioned way here. Okay, so we click that. The first thing we're gonna do is gonna say, just an if then statement. If navigator geolocation is available, then do these three lines of code. Else, pop up this message. Basically, pretty much any modern browser is gonna handle this, but if for some reason your browser does not accept the functionality of geolocation, it's gonna let you know with an alert box. So if your browser is able to get your location, then do these three things. First, we're gonna create a variable called options. Now that options is basically some plain text. It's some JSON information, three bits of information in here by bits. I mean, three little pieces, not actual bits. We're gonna set high enable high accuracy to true. Again, on a desktop like I'm running right now, I don't have a GPS look device on it. So that's not really gonna make a big difference, but if you have a GPS device on your phone or tablet, which you probably do or even hook to your computer, this will make sure it gives you your exact location. Without that, it's gonna try to get a quick location and it'll be general within a few blocks of where you are most likely. But we want as accurate as we can, so we're gonna enable high accuracy. Then we're gonna say maximum age 3000, I'm sorry, 30,000 milliseconds. And as you can see from the note up here, 60,000 milliseconds, so that'd be 60 seconds. So 30,000 would be 30 seconds. Basically the saying is get our location, but I don't want anything older than 30 seconds. We're gonna set the time out to 27 seconds, so try for that long and then give up. Should happen within a few seconds. So if we get to that, that's something's not right. Next, we're gonna create another object and we're gonna say our geolocation. Again, we checked our navigator geolocation up here and then we're gonna put it into a variable here just to shorten up the next line if we use it more times in the future. And what navigator geolocation is, again, is it's a browser functionality to be able to get your location coordinates. Now we're gonna create another object called watch ID. Again, everything on the left side of equal signs can be called whatever you want, but we're gonna say, okay, take our geonavigator, our navigator geolocation and watch its position. So we're saying ask the browser for our position. So far, everything we've done is within the browser. We're not really going off and using a service outside of our browser. So if the browser has a functionality, everything should be done. We're saying browser, we want you to run, try to get the location. If we're successful, we're gonna run this first function, show location, which is up here and we'll go to that in a second. If it fails, it's unable to get your location. We're gonna run our error handler function, which is right here. And we're also gonna pass it these options, which is this right here, which is our accuracy and time out information. So let's say we ask the browser, what is our location? And we pass that information and it fails for whatever reason, access denied because it's going to ask the user, do you want the browser to give your location to this application? And they can say yes, no. And it can say remember this for later on or not. So it might be that the user says no, I don't want to give you my location. And it can also just be unavailable or for some other reason. So we'll get error messages if there's an error. So that's all this function does here is it outputs messages, depending on whether it's error one or error two. Okay, next option, things are successful. The browser, we ask the browser for a location. It asks, the user is okay if I give this application to your location, they say yes. And the browser is able to get your location, whether it's a GPS unit coordinates or it's getting it based on your ISP server. Okay, so if that's successful, then we're gonna go up here. We're gonna run this function, show location. We're gonna pass it the information into a variable called position. And then we're gonna say, okay, let's get the latitude. So we're gonna say, look at the position, look at its coordinates and get its latitude. And then we're gonna do the same thing for longitude. Look at the position, look at its coordinates, get the longitude and put that into that variable. Now we're gonna pass it to another function or say get the address, latitude and longitude. And that would be down here, get address. And this is a function I created and we're passing it those information. We're gonna continue calling it latitude and longitude. And then we're gonna use the get function. This part of jQuery is the part that I have jQuery running in this application for, although I could have used it in other parts. And this is just saying, look at this address and get the data. And again, I actually wrote this script a while ago and I'm actually putting the variables in line here. You can also put them in a JSON format, which is probably a little cleaner. But basically we're saying, look at this address, which if you've watched previous tutorials, we used the same exact address in the first tutorial. And it's gonna give us some XML, as you can see right here. You can also change that to JSON if you want to get the JSON output. But we're gonna get that data and we're gonna run this function. And all the data that's been given, all the text that's been given by this address we're gonna put into a variable called data. And then we're here, we're gonna say, okay, look at the data and find in there any line that contains formatted address. And for each of those, we're gonna run this function here. And we're gonna create a variable called unit data. And we're gonna say, look at this function with the information that we've passed and get the text. So basically we're looping through the data each line. So basically this line, if you're familiar with how I usually do bash loop while loops, this is like while read line. We're saying while read line here, read the text and put it into this variable. Okay, and now we're gonna say, this is a little more jQuery here. We're gonna say, find the object, the element on the page that has the ID of output. So pound output means ID of output, which is our div tag down here. And we're gonna say, look at that and make, basically clear out any text in there and replace it with latitude, the word latitude, and then the actual latitude. New line, longitude, and then the actual longitude, new line, and then we're gonna append to that, the unit data, which is actually the formatted address up here, right? And then we'll return false because it's not returning anything to the function that called it. Okay, so now that we did all that, let's go ahead and we will hit start. And since it's the first time I'm running this page on this computer in this browser, it's saying, hey, do you want to use your computer's location? This website, this application wants your users, your location, allow it or deny it. If we say deny, we'll get one of those error messages created in the error handler. If we say allow, we get our latitude, longitude, and we get an address. And that is how you get your basic latitude, longitude, and address. Now, it will remember, like if I refresh this page and click start, it doesn't ask permission again. If for some reason the user wants to remove the permissions from that application or website, we can click here and say clear these settings for future visits. If I hit F5 or refresh and click start, it asks again. So the user has complete control over whether your computer gives this application permission or not, and they can take that permission away at any time. But at least Chrome, I think most browsers, you can go in and manage your settings and block or allow, but I think most will, by default, once you allow it, it will remember those settings for future use, which is nice, you don't have to ask every time. I mean, it will ask if they clear it out. So that is getting latitude and longitude and the actual physical formatted address for your location. And that's it for this tutorial. We're gonna get some more gooey stuff, more visuals in the coming weeks, but I just wanted to show you the basics of getting your latitude, longitude, and address. And again, the latitude and longitude part is using your browser, we're not using a service like Google, the address is what we're using Google for, and you can use other services if you'd like as well, but just realize that this first part you can pretty much always get, no problem, this part, there are restrictions, you know, you're getting information from somebody by their rules, there's other websites out there, or you can create your own database if you want, although that'd be a pretty big database. Anyway, as always, I thank you for watching. If you like this video, please like, subscribe, and comment, and share, and as always, I hope that you visit my website, filmsbychrist.com, that's Chris the K, there should be a link in the description. All the source code in this series is up on GitHub, under my username, metalx1000, so github.com forward slash metalx1000, and maps and locations, the name of the repository, the first part of the series was all these bash scripts, here you can get all those there, and everything in this GUI HTML and JavaScript series, we'll be under HTML here, the one we just did was the one called addresses, there's the code, and as always, I hope that you have a great day. Okay, this is an introduction to filmsbychrist.com. I'm Chris, that's Chris the K, that's me right there. My daughter, Amber, and my wife, Jennifer. We pretty much live in the swamps of Florida. I'm a firefighter by day, as well as by night, we work long hours, but that's not why you're here. You're here about the videos I put up on YouTube. These videos are mainly about computers and programming, which means most of my videos look something like this, and if that's what you're interested in, great. If not, that's all right. I do videos on other topics too, such as video editing, special effects, photo editing, 3D design, and music creation. If you are one of my viewers and you enjoy my videos, my Patreon page is a place where you can go to help support my videos. So I ask that you take the time to go to my Patreon page and look at different levels of rewards you can receive for different levels of backing. There should be a link in the description of this video if you're watching it on YouTube. Otherwise, you can visit patreon.com forward slash metalx1000. And I thank you for your time and your support. Have a great day.