[?music?]

[Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

[Geolocation: Requesting Location with Jim Hoskins]

One of the coolest new features in modern browsers

is the ability to find out the user's current location.

In this video, we'll learn about the HTML5 Geolocation API

and how to use it in your websites.

Being able to detect somebody's location through the web browser

is a very useful feature.

More and more, we're browsing the web on mobile devices

like smartphones and tablets, and being able to have a website, for instance,

show you the nearest store locations to your current location

or attach information to things like a Tweet as to where you're Tweeting from--

those are really cool features that we're getting more and more used to.

But how do we actually get the user's location from a webpage?

We can do that using the W3C Geolocation API, [dev.w3.org/geo/api/spec-source.html]

and this is a new API that allows us to access a device's location data

if it's available through the web browser.

Now, location is a very private piece of information.

We don't want websites always knowing exactly where we are,

so what the Geolocation API does is it requires the browser to ask the user

any time that a website requests its information.

Then, the person using the web browser can approve or deny

this particular website being able to see your current location.

So each browser does it a little bit differently, and we'll be taking a look

at how several browsers react to the Geolocation requests.

But first, let's start with a simple page and let's see if we can't figure out where we are

in our current office.

So right here, I have a very simple webpage.

I have just a label for output and we'll be updating this a little bit later

to show some information about our Geolocation.

If we take a look at the source, we can see it's a a very basic HTML page

and we have a script tag that we'll be working in to get our current location.

Now let's just see if we can get our location information on the screen.

For instance, our latitude and longitude.

So the way that we access the Geolocation API

is through an object in the navigator object.

So we can call navigator, which is a global object,

and the Geolocation property is where our API is stored.

From there, there's a few different methods available in this Geolocation API.

The most common we'll use is called getCurrentPosition

and this takes at least one function callback

and what this will do is it will call the function that we pass it

when the location information is available.

So let's create a function called (showMap) and let's just define that function

right above it.

function showMap(){

So now, let's save that out.

So what is going to happen here

is we're going to call navigator.geolocation.getCurrentPosition

as soon as the page loads.

We're passing it the name showMap of a function.

Notice we don't have parentheses here because if we were to do showMap

with parentheses right here, it would be executing immediately.

Instead, we're passing it the reference to the actual function

so when getCurrentPosition does get the permission

and the positional information, it will then call showMap.

ShowMap will contain any logic that we want to do that uses the location information

we requested.

So in fact, we will redefine showMap right now to take a location.

So let's see what this page does if we load it up in one of our browsers;

for instance, Chrome.

So I have our old page and I'm just going to refresh it,

and now we see that Chrome has displayed a bar to us that says

the site localhost wants to track your physical location.

It provides the user with a link to some information about what Geolocation can do.

And then, in the corner, it has an Allow and a Deny button.

It also has an "X" which dismisses as though you've denied it.

So what we can do is click Allow,

and now our showMap function has executed in the background.

We haven't actually done anything in showMap to show that,

but we'll do that next.

But one interesting thing you'll see right here

is it now has a location icon indicating to the user that this page now has access

to your location data.

From the browser, the user can actually manage this by clicking it

and we can clear this setting to deny the webpage from future uses

of the Geolocation API,

so the browser will prompt the user the next time a Geolocation API call is made.

Let's take a look at what the different browsers present for the confirmation.

We've seen Chrome. Let's take a look at Firefox.

I'm going to reload our localhost page here--our index.html--

and this has a slightly different page.

It has a popup that shows that the localhost page wants to know our location.

It gives us some options here as to whether we always want to share it

or never want to share it, or we can just click on Show Location

to show it for now.

Again, it gives you some more information to see exactly what the Geolocation API

will be providing to the website, so if we click on Share Location,

that would be the trigger that our showMap function would work.

Let's see what happens in Safari.

If I refresh the page, we get a different kind of popup

and it allows you to save the permission for 24 hours,

so we can Allow or Don't Allow.

It doesn't actually give the user very much information as to what it's going to be sharing,

but each browser is a little bit different.

So if we click Allow, the same will workflow will appear.

Finally, let's take a look at what it would look like in the iPhone simulator.

So if we open up our simulator and we click refresh,

what has popped up on my screen right now--

this is actually coming from the simulator itself

and the simulator is asking our operating system, OS X,

for the current location, and this isn't actually going to be shown to the user on the device.

This is an extra layer of protection between our simulator and our operating system

which ultimately holds our location information.

So if I allow the simulator to access our Geolocation information,

then, in the actual device itself, this is what the user would see

if using an actual iPhone, that the site would like to use your current location

and we have the OK and Don't Allow.

So we can click OK, and this works just like in every other browser.

So now we see how the Geolocation confirmation is presented to the user.

In the next video, we'll see how to actually get the location information from the browser.

[?music?]

[Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]