 Hello guys. Myself, Samprit Patel, Assistant Professor, Department of Computer Science and Engineering, Walchand Institute of Technology, Sholapur. Today, we are going to learn about how to apply geo-location to your HTML page. After this section, students will be able to apply different methods of geo-location or location service to retrieve the location of the user. So what is geo-location? So we are required many a times to get the location of our user or the visitor of our web page so that we can provide a better service to that particular user. So for example, you might have observed that many of the websites take your location and according to your location, you get the search results or the options you want to browse. So you frequently need to recover the client's location information in your web application. For instance, the location of the map to show customized data, et cetera. So HTML geo-location API is used to get the geographical position of the user. So this position is retrieved from the user or the device with the help of different components like GPS. So we use a JavaScript that can capture the latitude and longitude and can be sent to the backend web server to do fancy location-aware things like finding local businesses or showing your location on the map. Since it compromises your privacy, the position is not available unless the user approves it. So you have to allow the website or the browser to send your location. So these are some browsers that provides the geo-location API. So Chrome provides the geo-location API from its version 5.0 and onwards. Only the current version 50.0 provides the geo-location API to HTTP services. So it does not give your location if the services through HTTPS that is the secure browsing. After that, Internet Explorer from 9.0, Mozilla Firefox from 3.5 onwards, Safari browser from five onwards, and Opera from 16 onwards. So geo-location API is accessed via a call to navigator.geolocation. This will cause the user browser to ask them for permission to access their location data. If the user denies the permission, the location will not be sent to the web browser, web server, and the location service or the script that we have written to get the location will not be executed. If they accept it, then the browser will use the best available functionality on the device to access the information. So there are three basic methods used to get the position or location of the user. First is get current position. This method retrieves the current geographic location of the user. Watch position method retrieves periodic updates about the current geographic location of the device. This is usually used in maps type API or web pages. Clear position cancels the ongoing watch position call so that when it is not required, it clears the data retrieved from watch position or stops the watch position method. So properties of geolocation are geolocation method get current position and get position using method name specifies the callback method that retrieves the location information. So there are a number of properties which can be called through these methods. These methods are called asynchronously with an object position which stores the complete location information. The position object specifies the current geographic location of the device. The location is expressed as a set of geographic coordinates that is the longitude and latitude together with the information about the heading and speed. These are some properties. So chords that is coordinates we are using a particular short form for that. So it specifies the geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed. So this is one of the mandatory things that you have to give in your JavaScript. After that chords dot latitude which will return the latitude estimate in decimal degrees. The value ranges from minus 90.002 plus 90.00. After that we have chords dot longitude which will return the longitude in decimal degrees. Again the range is minus 180 to 180. Then we have chords altitude. This is optional. It specifies the altitude estimate in meters above the WGS that is 84 ellipsoids. Similarly there is chords dot accuracy. Again this is optional which specifies the accuracy of the latitude and longitude. Many a times you might have seen that accuracy to 50 meters, accuracy to 10 meters and so on. After that chords altitude accuracy. This is also optional. Specifies the accuracy of the altitude estimates in meters. Chords headings specifies the device's current direction of movement in degree counting clockwise relative to the true north. Chords speed specifies the speed ground speed in meters per second and the time span stamp which specifies the time when the location information was retrieved and the position object was created. So take some time and try to answer this question. What are the methods used to retrieve the location of the user? So the answer is first method is get current position which will get the current position of the user in latitudes and longitudes. Another is watch position. Watch position is used to keep a watch on the position and it keeps on updating the position or the location or the latitudes and longitudes periodically. Clear position is used to terminate the watch position method and clear the data retrieved by watch position. So let's see a program of geolocation. So geolocation should be written in a JavaScript. So see this is the HTML page that we have created to retrieve the geolocation of our page or rather of the user. So here we have given the HTML and body. We are just displaying that click the button to get the coordinates and on click we are calling the function getLocation which has been written in JavaScript and we are displaying the coordinates in the p tag. So here is the script which helps you to retrieve the location of the user. We are taking a variable x which will have the value of getElement by id to demo. This demo is the id which we have passed to the p tag. We are creating a function getLocation in which we are using if navigator.geolocation that is this is particularly to ask the permission to access the location of the user. So once this is executed it will pop up the browser will give you a pop up asking you for the permission to access the location. After that if this is true then navigator.geolocation get.getCurrentPosition will get the position of the user. Else it will display the message that geolocation is not supported by this browser. If we deny it or if the browser is not supporting the geolocation API. After that using showPosition which we have passed as a parameter to get current position x.innerHTML that is used to display the latitude by the help of position.coords.latitude which we have seen one of the properties of geolocation that is coords is the coordinates dot the latitude which will return the latitude of the user's location. And similarly we are taking the longitude using position.coords.longitude, okay. So now let's just execute this, okay. So when I click the try it button first thing it will do is it will ask for the permission to access the geolocation. So see this is the pop up that the browser has given. Will you allow this local file to access your location? So I'll say allow. The this app wants to use your location. Do you want to turn the location service? Yes, after clicking yes we have got the latitudes and longitudes of the user that is latitude is 17.6714 and longitude is 75.9234. So this was the example of geolocation. These are some references that I've used to make this video head first HTML5 programming by Eric Freeman of O'Reilly media and HTML5 and CSS3 second edition by Pragmatic Bookshelf. Thank you.