In this lesson, we're going to look at using JavaScript's Geolocation API. And if you wanna think about the impact of this, any application that uses your location, mobile, desktop or whatever else there is, is using this API, in some form. So I'm going to demonstrate how we can get our location, and then we'll use Google Maps so that we can show what we can actually do with it. And just to start getting our location, I'm gonna add some code that gets my location when I click the button, and it all starts using the navigator object, which is the browser itself, and the geolocation object that's part of it. You should be fairly well assured that most modern browsers do support the geolocation object. If you're not sure, you can use a feature detection library like Modernizer or something along those lines. But what we wanna do is get our current position, and the parameters that this method takes are the name of the function that we're going to run if it succeeds, and the name of the function that we're going to run if getting our position does not succeed. Now, what the Geolocation API does, is it runs through a series of ways that it has to find your location. It can use your IP address, it could use your mobile carrier, it could do cell phone triangulation, things along those lines. The beauty of using this is you don't have to know or care about the method that it uses. When we do get current position, we're looking for a standing position. There are other methods we can use to watch our progress. So say for a GPS app that's giving you directions, we will wanna watch that position as you moved. In this case, we're just gonna to look at the position that I'm in, and I'm gonna show a little progress meter here. So let's fill in our functions, and we'll decide what we're going to do when something happens. And the error function is a little shorter, I'm just gonna show a little progress indicator, and I'll show the message and the code that comes with that error. So those are just properties that we get back from that error object that gets passed in. Now, eventually I'm going to want to give the location information that I find when it works to the Google Maps API. But I'm going to start just by displaying the information that I get, so these are all just elements on my page. And notice that I'm passing in a position object here. The position has a coords object with it that's going to contain our location. It gives me latitude, longitude and the accuracy, how close is it in meters? So say for an IP address, that's gonna be more of a rough estimate, whereas say cell phone tower triangulation is going to be more accurate. Depending on what kind of reading we're getting, we might also get altitude and the accuracy of the altitude. If we're watching the position, we can also get the speed as well. Now, this is not going to apply because I'm not doing this while I'm driving, I'm just sitting down. So this will get all our information and we'll display that on the page, and I've got a couple other variables that I'm gonna just stick in here, because I give this information to the Google Maps API later on. What happens from here on out, is that I need to have a Google Maps developer account, and you can look up how to do that, but in order to access this, I need to have this script included. This is the Google Map API script, and I'm gonna put my developer key in here. I'm not gonna show it to you though, 'cause it's my key and I don't like sharing. So you can go through the instructions and get your own key here, and this makes it so that I can use the Google Maps API later on. And I haven't done a whole heck of a lot with this code. This is mostly boilerplate code that you can get from the getting started documentation on the Google site. A few important things I wanna point out. We have a zoom on the map, goes from one to 15, so I'm about (indistinct), moved in there, and we can create our own custom markers. Maybe you've seen markers on maps that have pictures and links in them, those are relatively simple to do. In this case, I'm just gonna mark this with this little thing that says, "We're here." The initialize function down here just draws the map initially. The map is actually going to show up in just a regular div on the page, so this designates where that's going to show. So what I'm gonna do is have another button called show new location, that's going to call this and give us a Google map with our location once it runs. So let's see what our page looks like and see if we can find out where in the world we actually are. Notice first off, I get a dialogue. Geolocation is an opt in for the user, so if I block this, then my function will just get an error back telling me that it can't find what it was looking for. I'm gonna go ahead and allow it. There we go, there's my latitude and longitude. Now, accuracy is gonna be way off in this case. I'm using a virtual machine, so maybe that messed with the API a little bit, so that's quite a few meters, but we did get a location for where this is running from. The rest of this now, I can do this to show my Google Map location, and it paints it right here on this canvas. Now, there's my little marker that says, "We're here." I'm somewhere in the California area at this point, and after this, this is just a regular Google Maps interface. You can do anything with this that you do on the regular site. In this lesson, we looked at getting our location and then taking some steps to make practical use of that location data. Thank you for watching. In our next lesson, we will take a look at drawing with the Canvas API.
