HTML5 GEO-LOCATION API

API (Application Programming Interfaces) Application Programming Interfaces Stand in HTML5. It is a set of routines, protocols, and tools for building software applications.

An API is a collection of pre-built components, that can be used with JavaScript

It is a set of programming codes that enables data transmission between one software application, website, and another.

It also contains the terms of this data exchange between server and HTML.

Geo-location in HTML5 is used to share the location with some websites and be aware of the exact location. It is mainly used for local businesses, and restaurants, or showing locations on the map. It uses JavaScript to give latitude and longitude to the backend server. Most browsers support Geolocation API.

The Geolocation has following methods which make it interesting and easier to work.

getCurrentPosition(): It fetches the current location of the user.
watchPosition():It fetches periodic updates of the user’s current location.
clearWatch(): It cancels a watchPosition call currently in execution.

Example1 : This example explains returning the user’s location using the getcurrentPosition() method.

<body>
<h1>HTML Geolocation</h1>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Click</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>

<button>: A button with an onclick attribute will trigger the getLocation() function.

<p> with the id “demo”: A paragraph element where the latitude and longitude will be displayed.

Then it declares a constant variable named “x” and Retrieves the HTML element with the id “demo” and assigns it to the variable “x”.

So, when the button is clicked it will call the getLocation() function, where, It checks if the Geolocation API is supported in the browser.

If supported, it calls the navigator.geolocation.getCurrentPosition() method, passing the showPosition function as a callback, where it takes a position object as an argument, which contains the coordinates (latitude and longitude). It then updates the content of the paragraph with the id “demo” to display the user’s latitude and longitude.

Example 2: This example will demonstrate the watchPosition() method.

<h1>HTML Geolocation using watchPosition method</h1>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Click </button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
    
function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

The onclick attribute specifies that the getlocation() function should be called when the button is clicked and the two paragraph elements with the ids “paraID” and “paraID1.” They will be used to display the latitude and longitude.

The getlocation() function is triggered when the button is clicked. It uses navigator.geolocation.watchPosition to continuously monitor the user’s position and calls the showLoc function whenever the position changes.

The showLoc function takes a pos parameter, representing the position. It updates the HTML content of variable1 with the latitude and variable2 with the longitude obtained from the pos object.

HTML5 GEO-LOCATION API

Leave a Reply Cancel reply