Create Geolocation using JavaScript

JavaScript Project

Creating geolocation functionality using JavaScript involves using the browser's Geolocation API to retrieve the user's current location. Here's an example of how you can create geolocation functionality:

1. Set up your HTML structure:

<!DOCTYPE html>
<html>
<head>
  <title>Geolocation Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="geolocation">
    <button id="getLocation">Get Location</button>
    <p id="latitude">Latitude: </p>
    <p id="longitude">Longitude: </p>
    <p id="accuracy">Accuracy: </p>
  </div>

  <script src="script.js"></script>
</body>
</html>

2. Create a CSS file (styles.css) to style the geolocation display:

css
.geolocation {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.geolocation button {
  margin-bottom: 10px;
  padding: 10px;
  font-size: 16px;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
}

3. Now, create a JavaScript file (script.js) to handle the geolocation functionality:

javascript
  document.addEventListener('DOMContentLoaded', function () {
    const getLocationButton = document.getElementById('getLocation');
    const latitudeElement = document.getElementById('latitude');
    const longitudeElement = document.getElementById('longitude');
    const accuracyElement = document.getElementById('accuracy');

    function showPosition(position) {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      const accuracy = position.coords.accuracy;
      latitudeElement.textContent = `Latitude: ${latitude}`;
      longitudeElement.textContent = `Longitude: ${longitude}`;
      accuracyElement.textContent = `Accuracy: ${accuracy} meters`;
    }

    function handleLocationError(error) {
      let errorMessage = 'Error: ';

      switch (error.code) {
        case error.PERMISSION_DENIED:
        errorMessage += 'User denied the request for geolocation.';
        break;
        case error.POSITION_UNAVAILABLE:
        errorMessage += 'Location information is unavailable.';
        break;
        case error.TIMEOUT:
        errorMessage += 'The request to get user location timed out.';
        break;
        case error.UNKNOWN_ERROR:
        errorMessage += 'An unknown error occurred.';
        break;
      }

      latitudeElement.textContent = errorMessage;
      longitudeElement.textContent = '';
      accuracyElement.textContent = '';
    }

    getLocationButton.addEventListener('click', function () {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, handleLocationError);
      } else {
        latitudeElement.textContent = 'Geolocation is not supported by this browser.';
      }
  });
});

4. Place all the files (HTML, CSS, and JS) in the same folder.

Open the HTML file in a web browser, and you should see a "Get Location" button. Clicking the button will prompt the user to allow access to their location. If granted, the latitude, longitude, and accuracy of the user's current location will be displayed on the webpage. If there is an error retrieving the location, an error message will be displayed.

Output:

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc

facebook.com/pythontpoint

twitter.com/pythontpoint

instagram.com/pythontpoint

PreviousNext

Join our newsletter for the latest updates.

About us

pythontpoint.org : The best online tutorial to learn Python, Machine Learning, Deep Learning, Data Science, Power BI, SQL & Java.
We Provide best Academic training, Corporate training, Project & Internship.

Our Services

Corporate & Academic Training
Website Designing
Website Development
Digital Marketing
Project & Thesis

Contact Us

Plot No-741, 2nd Floor, Jayadev Vihar, 751013, Bhubaneswar, Odisha
Call :
0674-2361252
Mail : info@silansoftware.com
Contact Us
Privacy Policy

Our Courses

Our Tutorials