So now that you have a good understanding
of how we plan a project
and build a flow chart using user stories,
it's time to start working on the project itself.
So let's now learn how to use the Geolocation API.
And the Geolocation API is called an API
because it is in fact, a browser API
just like for example, internationalization
or timers, or really anything that the browser gives us.
And so Geolocation is just another API
like that, but it's also a very modern one,
and actually there are many other modern APIs
like that, for example, to access the user's camera
or even to make a user's phone vibrate.
So there's all kinds of crazy stuff that you can do,
but in this project, let's simply focus on Geolocation.
And geolocation is actually very, very easy to use.
All you have to do is navigator.geolocation.
So VS code is already showing it
to me and then get
current position.
And now this function here takes
as an input to Callback functions.
And the first one is to Callback function
that will be called on success.
So whenever the browser successfully got the coordinates
of the current position of the user
and to second callback is the Error Callback
which is the one that is gonna
be called when there happened an error
while getting the coordinates.
So let's simply define two functions here.
So this is the success one, and this is the error one.
And let's actually simply start with this one.
And here we will simply do an alert.
So like this could not get
your position
and now about the Success Callback.
And this callback function here is actually called
with a parameter, which we call the Position Parameter.
So we can define it here.
And as always, we can give it any name that we want.
It is simply JavaScript who will call this function here
in case of success.
And it will pass in an argument
and we can then use that here.
And so for now, let's simply log it to the console.
And that's actually it already.
Now just to make sure that we don't get any errors
in an old browser, we can test
if this navigator.geolocation actually exists.
So let's just say
if navigation
or navigator.geolocation.
So if that exists, well then basically do all of this.
So let's check it,
and actually I already have the page running,
but it's here on this other side
because it takes up too much space.
But anyway, here, you already see dead popup window
from the browser asking for permission to use your location.
And so let's actually start
by clicking on Block just to see what happens then.
And so, as you see, this is a situation
in which there is an error getting the coordinates.
And so therefore we then get this alert
that we specified down here.
All right.
But anyway, let's go back
and we can then click here on this icon
on this right side, and then clear these settings.
So I have blocked tracking the location
but now I want to actually make it work when I reload,
and so I need to clear that setting
so that now it's gonna ask me again
this time I allow, and now let's take a look at the console.
And so here, indeed, we get this position object.
All right, and the thing that we are interested in
is already here.
So that's these coordinates
with this latitude and this longitude.
Let's see what else we have in there.
So we also have altitude,
we have speed, but these are probably only available
like on mobile phones, because I guess that
like most computers don't have a way
of knowing the altitude,
but anyway let's now get this latitude
and the longitude from this object.
So remember they're called latitude
and longitude and they are inside of this coord's object.
So this is a child object of this bigger object.
And so let's not take the positions out of the object.
So actually the coordinates out of the object.
And so let's simply do,
const latitude=position.coords,
and now we could write .latitude
like this, but even better,
we can simply use this structuring.
And so this will then create
a variable called latitude based
out of the latitude property of this object.
And now the same for the longitude.
So just to see if this worked,
let's just reload here again.
And so indeed, here are the coordinates
of my current location.
They are certainly not 100% accurate
but we should be able to work with them.
Now, what I want to do with his coordinates
will be of course to load the map
and then center that map on this position.
And so in the next lecture, we're actually gonna do that
but for now let's simply very quickly create a link
on Google maps, okay.
So let me quickly open up Google maps here.
And so the way the URLs work
on Google maps is that we have this URL
and then here we have the latitude and here the longitude.
And so it's very simple to build a URL like this.
Let's just copy this very quick.
Then here creating a template literal.
This part here is not important.
And so this here is gonna be the latitude,
and then here the longitude.
Give it a safe,
and now here is that link,
and I think I need to make it a bit bigger here actually
for you.
And now we can right click here and then open a new tab,
and indeed here is Google maps on my current location.
All right, and no matter where I go,
well, actually it changes the URL.
So nevermind, but yeah,
you should try to do that on your own, of course,
and then it will take you to your current location
where you are right now.
So of course your numbers here are gonna look different
than mine.
But if you create a link like this,
then that will take you to your current position on the map,
and I think that's really cool already.
So this was of course
just to see how Geolocation actually works in JavaScript.
And now in the next video,
we will use a third party script to basically load a map
and display it here on the right side of our user interface.
So on this part here, we want a map just like in our demo,
and so that's gonna be the task in the next video.