Start a free Courses trial
to watch this video
In this video we learn about the HTML5 Geolocation API, and see how to request the user's location.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[?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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up