Welcome back.
In this video, let's build an application called Get My Location using the built in Geo Location API.
So when I click on Get my location, it's going to give me my current location and indeed I am in Shanghai.
Well, I will show you some technique because for geo location API it gives us all the coordinates.
So I will show you how I got this one done.
So let's get started.
As always, I have provided the starter template for you with a CSS and then the HTML and with a few
lines of JavaScript with some selection.
Again, this section is not about HTML or CSS or HTML.
That is why I have provided this of file for you.
So now let's get started with the job application API.
So here we go.
Let's collapse this one and let's play around with the geolocation API.
So our code is one as your location API.
So let's see how we are going to play around with it.
So first we are going to get the location and here we go.
I'm going to use the end operator for JavaScript.
So I make use of geo location and then in the navigator.
So what does it mean?
It simply means that we are trying to get a property or a method on this object called navigator.
If we have a property called Geo Location on Navigator, it means that it is true.
So here we can go ahead and then console.log say that yes it is true and let's check it out.
So let's open this application that we are building.
We can see that we have some static data here, so let's open the console and non can see that indeed
it is, yes.
Meaning that there is a property on the navigator so we can go ahead and even console the log.
The navigator, which is a global matter.
Then I want the geo location and now let's see.
And this is a geo location, so let's go ahead and then implement that.
So here what we are going to do is that on the Navigator Dot geolocation we have a method called get
current position and for this one we are going to pass in a callback function.
And for this we have access to our position and here we go.
So for this let's console.log the position and let's see, let's check it out inside.
And now you can see that is asking me for permission because this application is trying to access my
location.
So let's click on allow.
As soon as I click on that, I'm going to see my location and here is my position.
And what we want is called the cost, meaning the coordinates, and we want the latitude and then the
longitude.
These are the properties that we need.
And this, all this API gives us, it gives us the longitude and then the latitude.
And if you want to convert this one to real location, let's see how we are going to do it.
So let's copy the latitude, value.
And next step is that let's go to Google.com, slide maps and for this one let's pass in the latitude
and then comma separated.
The next one going to be the longitude.
Copy that one also.
And now let's place it inside after the comma and let's hit such.
And you can see it has given me the same result inside my application.
So we are going to take the latitude and longitude and then place it on the map.
So let's see how we are going to get that one down.
And this what I did in the final project, we can see that for this one.
I pass in the latitude and longitude to Google Map to have something like this in my application.
So what about the details about the country here?
Again, this API does doing gives us the actual information about the location.
So we are going to use a third party API core position stock.
And for this API too, we can build awesome application out of it.
So let me show you how we are going to use this one to display this information about my current location.
So here we go.
So first step is that let's click on Get Free API.
Like I said, some API, we need to pay some free and some give you some free tiers based on the number
of requests.
So let's click on Get Free API and these are the plans.
So what we want is a free one that is for personal use.
There is no card required.
And let's look at the number of requests.
The number of requests is 25 requests.
So make sure that you doesn't exceed this 25 requests.
When you say requests, it's like this one.
Anytime I click on this one and I get new data, that is a request.
If I click again, again, again, it is increasing my requests.
So take note about this.
So make sure that you sign up.
And for this the sign up is pretty easy after signing up or what you need is the API key.
So what is the API key?
The API key is being used by this server called position style to keep track about how you are using
the API.
I already have an API key, so there is no need for me to sign up again in case you have some problem
or difficulties about getting the API key.
Don't worry, leave a question below.
The next step is that let's read the documentation this way is going to guide us how to use the API
and here we go.
You can see that we have what is called getting started an API access key and then the authentication.
So this is a basic endpoint http slash API position stack dot com reg one for and here you pass in the
access key.
And if you scroll down, they have a sample code here and here is it API end point we have forwarding
geocoding meaning that for this you pass in the actual name and when I give you the position about this
location, but what we want is what the reverse meaning that we are going to pass in the longitude and
latitude to give us the data about our location.
So we need this end point so you can copy this one.
And now let's get back to our application and let's pass it like that.
You will come back to it.
So let me comment this one as that's great.
So I'm going to paste my API key.
The API key looks something like this, so I'll paste mine and I will change my API key as I move on.
So now that we have all the ingredients, the next step is that let's finish up with the logic and the
last step is a body map.
The link that want to is an iframe and for the iframe to I'll provide it for you.
Okay.
So for the meantime, let's get done about the location.
So here, let's go ahead and then create a function as a function and then going to be as geo or geo
location and then has the X and here we go.
So inside here, I'm going to tap this one and then place it inside my function.
Now here we go.
So here let's do structure or get the individual properties, the latitude and lat for short.
And for this we can get it from the position, the course and then the latitude and then the longitude
for short as long is equal to position dot course dot longitude and that is it.
So the next step is that I need to embed the whole map into our browser and remember we have the HTML
where we are going to embed the map as the header.
So we are going to select the ID of map.
So here you go.
You're going to be required to copy this one and down here, paste it and change this one to a map of
it.
So now here we go.
So after we got this one, let's go ahead and then inject the whole map into the DOM.
So I will take my map element I selected here on that I'm going to use in a l is equal to something.
And here we need to get the map the map code and we're going to use the eye frame so it looks something
like this.
So let me show you here.
Let me pass the code here and I'll give this one to you the link.
So here you can see that we have the base you are error, which is maps and next is question mark and
then query and here is our value I have added for you automatically.
So here we pass in the latitude and then come on and then the dollar sign and then three bases and then
our longitude.
And that is it guys.
That is it.
So now if I call this function, so let's save it now and let's check our application and let's refresh
it and let's see and you can see that the map is coming.
A And we go back our map, guys, I'm really happy about this, how easy it is.
Great.
So the last step is to get information about my current location, Paris, Shanghai, details.
So let's see how we are going to get that one done.
And again, I don't want to display the map automatically, but instead I want to click on the get my
location and then I'll display the map.
So we are going to add event lists now on the bit.
And so here you go, B, T and dot add event lists now.
And I want the click event.
Then our core, the geo function is that.
And then the next step is what to be able to get the location, the actual location.
So here we go.
So let's create the function down here as const gets location.
And remember, this API requires us to pass in the latitude and longitude.
So this function we are going to pass in the latitude and then the longitude and here we go, because
this one too, we need to handle the promise.
Let's mark our function as an async and inside, try and catch.
Let's go ahead and handle that.
So we are going to make use of the fetch to make a request to that API to get that.
Now fetch has come here again.
So if bring in fetch.
So we need to pass in the you are error and for the you are to our provide for you.
So let me paste that one inside the fetch client when I be back tick and then the bucket because I want
to add the dynamic data and indeed I've added them here as that latitude and longitude.
So the next step is that I need to assign the result coming back from this one as response, if you
see how we did it and now on that, let's go ahead and get the actual data by awaiting the response
dot.
Jason.
Great.
So now we had back the actual data.
So if you consume that log the data, you are going to see the details about my location or your location.
So we are going to call this function inside this function to get the coordinates.
Remember, we have the latitude and longitude.
So down here I will go ahead and then call the geo location and I'll pass in the latitude and then the
longitude.
Great.
So let's save it.
And now let's check our browser and let's pop in our console and let's see as soon as I click on Get
My Location, well, it says that LAX is not defined on line number 18, meaning this one.
Oh, sorry.
Supposed to be inside the eve.
Sorry, guys, after the map.
So before we save it, let's also console.log the arrow down here in case we encounter some error.
Let's save it.
And now let's check it out.
Let's refresh our page.
And now let's click on Get My Location.
Let's look at a map and I got something wrong here.
Response dot Casey is not a function, so it might be here.
Where?
Oh, sorry.
We need to await that.
Sorry, guys.
A back on my side.
So now let's click on get my location and let's wait for a while.
And we have our data back.
And this data is about my current location, how awesome it is.
But these are in an array.
So we can take the first index and then we can use these properties and that is it, guys.
So the last step is that now we have the data here, so we are going to take the control container and
next is we inject the values coming from this one.
So let's get back to the HTML and this is a container.
So we are going to select everything inside the container.
So from here down here and now I'll select that and now back here.
So as we did for the tasks manager application and the battery application is going to be the same method
here.
So here we go.
So inside here, let's get the actual data.
So the cons are called this one as country and I want the first index.
Remember it's an array.
Great.
So for this one, I'm going to take the country container that is not a HTML when I use the back take
and then our paste the HTML and that is it.
Remember, this is what I'm trying to use.
Great.
So here, let's fill up with a dynamic data here.
So for continents we are going to use the dollar sign carrier basis and then country the continent.
And then and raging let's copy this one.
And then under Reagan instead of P let's replace that and make use of Reagan and we have the straight
inside the pea to list.
Let's change this one to st.
The last one going to be the address and address.
We have it as label inside the console.
You saw it?
Yes.
You can see that we have the default values here.
So let's go ahead and then remove that or we can comment that one.
And now we have it as an empty.
If I click on Get my location.
Let's have a look, guys.
Hey, the map has come and let's wait for the country.
Details also where I think we got something wrong.
So let's check our console and it says that cannot read a property or continent.
So this means that we are not having the actual data here.
So let's try to console.log the data and let's look at the format how we can get that one.
So let's have a look and let's click on the Get My Location and I'm waiting for the response and here
we go.
It is inside the data and then the array.
So going to be dot data.
Yes, like this one.
So now let's save it and now let's make a request again and let's wait.
And you can see that we go back the Asian hide, everything is working, but we have some strange diff
here where I think we need to remove all so we need to have this one.
Yeah.
Great.
So now again, let's hit send and I have the details as compared to the final one.
You can see everything remains the same.
So guys here and this section under making use of web APIs, it's time for you to explore more at every
time.
So I want to give you a challenge.
Looking at this API, we can make a request to find details about a particular country, meaning that
if you enter, let's say, USA or Ghana, we're going to have more details about the country, including
the flag, the currency, the language, the history of that country.
It's your time to explore more how to make use of what HTTP requests.