Explain Geo location and web worker with an example in HTML5 & CSS3.
2 Answers


The HTML Geolocation API is used to locate a user's position. The HTML Geolocation API is used to get the geographical position of a user. Since this can compromise privacy, the position is not available unless the user approves it.

Example of Geo-Location:
<!DOCTYPE html>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;  


Explanation of the example:

  • Check if Geolocation is supported
  • If supported, run the getCurrentPosition() method. If not, display a message to the user
  • If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter (showPosition)
  • The showPosition() function outputs the Latitude and Longitude


A web worker, as defined by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG), is a JavaScript script executed from an HTML page that runs in the background, independently of other user-interface scripts that may also have been executed from the same HTML page.


enter image description here



  • HTML5 Geolocation API lets you share your location with your favourite web sites.

  • A Javascript can capture your latitude and longitude and can be sent to backed web server and do fancy location-aware things like finding local businesses or showing your location on a map.

  • Geolocation methods getCurrentPosition() and getPositionUsingMethodName() specify the callback method that retrieves the location information. 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 together with information about heading and speed.

function getLocation() {

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

Web Workers

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

  • A web worker script never blocks a user interface script. They allow long task to be executed without disturbing the currently loaded web page.

  • Web workers are JavaScript files that run in separate threads.

  • We can create a web worker by creating separate JavaScript file and create new worker instance:

var worker = new worker('workerscript.js');

Please log in to add an answer.