How to Get a User's Current Location from the Browser with the Geolocation API - JavaScript

[Music] hey guys welcome back to the channel in this tutorial I'm going to show you how to use the geolocation API so you can access the user's latitude and longitude coordinates you can use these coordinates to build a variety of different applications for instance let's say that you're building an application that wants to pinpoint a user's exact location on a map while you can use their coordinates to do that I've already written a Blog about how to use the geolocation API I'll leave a link in the description so you can check it out but I did want to create this video in conjunction to this blog so you guys can get a better understanding of how to use the geolocation API this is what we're going to be building in this project we're going to create this button as soon as we click this this is going to activate the geolocation API and if we click allow we're going to allow it to access our coordinates which we're then going to use to make an API call to the Big Data Cloud API that API returns all of this good information that we can use to build an application as you can see it has the continent that I'm located the postal code the state the city the county and a whole bunch of other information all right let's get right into this tutorial all right guys let's go ahead and get started the first thing we want to do is create a button to allow the user to share the location so let's create a button and this is going to say share my location and we're going to give this an ID name of share all right now let's create an element of pre we're going to give this an ID name of result and this is to store the results that we get back from the API all right let's move on to the JavaScript and here we're going to create two variables the first one we're going to call it HTTP and in this one we're going to be using the XML HTTP request object so we can make HTTP requests to apis so let's use the XML HTTP request class and for the other variable we're going to call it result and for this one we're going to get access to the pre element that we created in the HTML file we give that an ID name of result all right now let's get access to this button so when the user clicks it we can access their coordinates so let's do document query selector share and then add event listener click and then here we're going to create a callback function called find my coordinates all right let's go ahead and create that function all right so two things can happen here either we can be successful in retrieving the coordinates of the user or not so we're going to use that if statement and let's do Navigator dot geolocation so if we are successful we're going to write some code in here however if we're not successful we're gonna output an alert message saying geolocation is not supported by your browser so let's type that in here all right but if the geolocation API does work then we want to do navigator.geolocation and we're going to use the function get current position and this one is going to retrieve the user's coordinates all right let's go ahead and do a console log to Output their coordinates so we're going to do position dot chords dot latitude and we also want to Output their longitude so let's do position dot chords dot longitude all right if for whatever reason the geolocation API is not able to retrieve their coordinates then we want to Output a message letting the user know why so let's do error and we're going to do an alert message in here as well and this one is going to do ER Dot message right so this is this is going to Output the message all right so now if we click on this button and we click block here is the alert message that we created in here so this is saying user denied geolocation all right cool so the next time that we refresh this now we want to share our location this is not going to allow us it's not going to give us the option it's going to have this cached all right so to reset this we have to go into our settings if you're using Google Chrome go ahead and click privacy and Security Site settings and then right here this is the URL you're going to click ask default for the location so now if we refresh this and click share my location now you're going to click allow so this time if you look in your console you should be able to see your coordinates so this is your latitude and this is your longitude and this is all that the geolocation API does for us it just accesses our latitude and longitude but we can use these coordinates to make API calls to other apis that is going to give us information about our location in this case we're going to be using the Big Data Cloud API it's all right so what we're going to do is we're going to delete this console lock here and we're going to create a variable called b d c API and this is going to be the endpoint for that API so in order to know that we have to go over to the Big Data Cloud API go ahead and click on this link and you're going to click on documentation reverse geocoding and click on this link here and here they give us an example of how they use this we're going to go ahead and copy this as you can see this is the information that it returned and this is what we want to return for our users as well so I'm going to exit out of here and I'm going to create backticks and I'm going to paste that in there we are going to delete this here it says your API key we're not going to use an API key we're also going to delete this language local locality and language and we're also going to add here reverse geocoding hyphen all right so let's go ahead and delete the latitude that they have here we're going to add the money symbol and brackets and we're going to replace that with position chords dot latitude all right and let's do the same thing for longitude all right now that our endpoint is set up we're going to call on a function called get API and I don't know why it did that all right so get API and we're going to pass it in the BDC API variable that we just created which holds the endpoint to the Big Data Cloud API all right so let's go ahead and create this function get API down here all right so to make an HTTP request to this API we use the variable that we created at the top HTTP open and this is going to be a get request we're going to pass it in the BDC API endpoint and then we're going to use HTTP once again this time we're going to use send so that's going to make the call and now we're going to grab the response with HTTP on ready State change all right we're going to add a function here and we're going to add an if statement that says dis.readystate is equal to 4. and this dot status is equal to 200 so this means that the HTTP request was successful at which point we want to Output the results on the screen so let's use the result variable in our HTML equals to this dot response.txt all right so now when we click on this it already has our coordinates because we allowed it to and as you can see it has this information about where I'm located in the United States of America this is my ZIP code or postcode as they call it here this is a state that I'm in and then it has all sorts of good information in here it does not have City but it does have locality here which has the name of the city sometimes the city does appear Let me refresh this and click it again I've had it to where I refresh it click on the button once again and now it does have the city but sometimes it doesn't but I believe if you access locality it will always have the city so you can go ahead and use that for consistency So currently if we try to access this information we can't because this is in a Json format so in order to access the information you want to store the results in a variable I'm going to create a variable called results and I'm going to do Json parse this response.txt and at this point I can access the information I'm just going to use a console log so let's do results no I'm not going to use City I'm going to use locality because the city was not working all the time all right so now if I click on this all right we know that's going to show up now I'm going to access my console and as you can see I was able to access the information so this is the name of the city that I am currently in so this is how you would go about retrieving this information all right see you guys in the next one thank you for watching [Music]

Channel: Web Dev Tutorials

Views: 9,637

Keywords: Geolocation: Displaying User or Device Position on Maps, Get users location with Javascript geolocation, How To Get a User's Location With JavaScript (Geolocation API Tutorial), Geolocation API Tutorial - Get User Location with Javascript, How to Get Your User's Current Location with the Geolocation

Id: OvDu9c8PYrk

Length: 10min 13sec (613 seconds)

Published: Fri Nov 25 2022