[?music?] 0:00 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 0:02 [Geolocation: Requesting Location with Jim Hoskins] 0:07 One of the coolest new features in modern browsers 0:12 is the ability to find out the user's current location. 0:15 In this video, we'll learn about the HTML5 Geolocation API 0:18 and how to use it in your websites. 0:21 Being able to detect somebody's location through the web browser 0:23 is a very useful feature. 0:26 More and more, we're browsing the web on mobile devices 0:28 like smartphones and tablets, and being able to have a website, for instance, 0:31 show you the nearest store locations to your current location 0:35 or attach information to things like a Tweet as to where you're Tweeting from-- 0:38 those are really cool features that we're getting more and more used to. 0:43 But how do we actually get the user's location from a webpage? 0:46 We can do that using the W3C Geolocation API, [dev.w3.org/geo/api/spec-source.html] 0:51 and this is a new API that allows us to access a device's location data 0:57 if it's available through the web browser. 1:02 Now, location is a very private piece of information. 1:04 We don't want websites always knowing exactly where we are, 1:08 so what the Geolocation API does is it requires the browser to ask the user 1:11 any time that a website requests its information. 1:16 Then, the person using the web browser can approve or deny 1:20 this particular website being able to see your current location. 1:24 So each browser does it a little bit differently, and we'll be taking a look 1:28 at how several browsers react to the Geolocation requests. 1:31 But first, let's start with a simple page and let's see if we can't figure out where we are 1:35 in our current office. 1:39 So right here, I have a very simple webpage. 1:41 I have just a label for output and we'll be updating this a little bit later 1:45 to show some information about our Geolocation. 1:48 If we take a look at the source, we can see it's a a very basic HTML page 1:51 and we have a script tag that we'll be working in to get our current location. 1:56 Now let's just see if we can get our location information on the screen. 2:00 For instance, our latitude and longitude. 2:04 So the way that we access the Geolocation API 2:06 is through an object in the navigator object. 2:09 So we can call navigator, which is a global object, 2:13 and the Geolocation property is where our API is stored. 2:17 From there, there's a few different methods available in this Geolocation API. 2:21 The most common we'll use is called getCurrentPosition 2:25 and this takes at least one function callback 2:34 and what this will do is it will call the function that we pass it 2:37 when the location information is available. 2:41 So let's create a function called (showMap) and let's just define that function 2:44 right above it. 2:51 function showMap(){ 2:53 So now, let's save that out. 2:59 So what is going to happen here 3:02 is we're going to call navigator.geolocation.getCurrentPosition 3:04 as soon as the page loads. 3:08 We're passing it the name showMap of a function. 3:10 Notice we don't have parentheses here because if we were to do showMap 3:13 with parentheses right here, it would be executing immediately. 3:17 Instead, we're passing it the reference to the actual function 3:20 so when getCurrentPosition does get the permission 3:24 and the positional information, it will then call showMap. 3:27 ShowMap will contain any logic that we want to do that uses the location information 3:31 we requested. 3:37 So in fact, we will redefine showMap right now to take a location. 3:39 So let's see what this page does if we load it up in one of our browsers; 3:43 for instance, Chrome. 3:47 So I have our old page and I'm just going to refresh it, 3:49 and now we see that Chrome has displayed a bar to us that says 3:53 the site localhost wants to track your physical location. 3:57 It provides the user with a link to some information about what Geolocation can do. 4:02 And then, in the corner, it has an Allow and a Deny button. 4:07 It also has an "X" which dismisses as though you've denied it. 4:11 So what we can do is click Allow, 4:15 and now our showMap function has executed in the background. 4:18 We haven't actually done anything in showMap to show that, 4:22 but we'll do that next. 4:25 But one interesting thing you'll see right here 4:26 is it now has a location icon indicating to the user that this page now has access 4:28 to your location data. 4:34 From the browser, the user can actually manage this by clicking it 4:36 and we can clear this setting to deny the webpage from future uses 4:39 of the Geolocation API, 4:44 so the browser will prompt the user the next time a Geolocation API call is made. 4:47 Let's take a look at what the different browsers present for the confirmation. 4:53 We've seen Chrome. Let's take a look at Firefox. 4:57 I'm going to reload our localhost page here--our index.html-- 5:02 and this has a slightly different page. 5:06 It has a popup that shows that the localhost page wants to know our location. 5:09 It gives us some options here as to whether we always want to share it 5:14 or never want to share it, or we can just click on Show Location 5:18 to show it for now. 5:22 Again, it gives you some more information to see exactly what the Geolocation API 5:24 will be providing to the website, so if we click on Share Location, 5:28 that would be the trigger that our showMap function would work. 5:34 Let's see what happens in Safari. 5:37 If I refresh the page, we get a different kind of popup 5:39 and it allows you to save the permission for 24 hours, 5:42 so we can Allow or Don't Allow. 5:46 It doesn't actually give the user very much information as to what it's going to be sharing, 5:48 but each browser is a little bit different. 5:52 So if we click Allow, the same will workflow will appear. 5:55 Finally, let's take a look at what it would look like in the iPhone simulator. 5:59 So if we open up our simulator and we click refresh, 6:03 what has popped up on my screen right now-- 6:07 this is actually coming from the simulator itself 6:10 and the simulator is asking our operating system, OS X, 6:13 for the current location, and this isn't actually going to be shown to the user on the device. 6:17 This is an extra layer of protection between our simulator and our operating system 6:24 which ultimately holds our location information. 6:27 So if I allow the simulator to access our Geolocation information, 6:29 then, in the actual device itself, this is what the user would see 6:35 if using an actual iPhone, that the site would like to use your current location 6:40 and we have the OK and Don't Allow. 6:44 So we can click OK, and this works just like in every other browser. 6:47 So now we see how the Geolocation confirmation is presented to the user. 6:52 In the next video, we'll see how to actually get the location information from the browser. 6:55 [?music?] 7:00 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 7:01