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