Find Your Location using HTML, CSS & JavaScript

---

It is against policy to access Geolocation in Blogger.com. However, you can still find your location by clicking on CodePen button and then clicking the Get Location button to retrieve your location data

Source Code

HTML

<div class="container">
  <h1>Find Your Location</h1>
  <p>Your location: <span id="location"></span></p>
  <button id="getLocation">Get Location</button>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  font-size: 36px;
  margin-bottom: 30px;
}

p {
  font-size: 24px;
  margin: 0 auto 20px;
}

#location {
  font-weight: bold;
}

button {
  background-color: #4CAF50;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
}

JavaScript

// get reference to the location span and button
const locationSpan = document.getElementById('location');
const getLocationButton = document.getElementById('getLocation');

// add click event listener to the button
getLocationButton.addEventListener('click', () => {
  // check if geolocation is supported
  if (navigator.geolocation) {
    // get current position
    navigator.geolocation.getCurrentPosition(position => {
      const { latitude, longitude } = position.coords;
      locationSpan.textContent = `Latitude: ${latitude}, Longitude: ${longitude}`;
    }, error => {
      locationSpan.textContent = `Error: ${error.message}`;
    });
  } else {
    locationSpan.textContent = 'Geolocation is not supported by this browser.';
  }
});

Step By Step Explanation of above code snippet:

These following two lines of code use the document.getElementById() method to get references to the "location" span and the "getLocation" button.

JavaScript

// get reference to the location span and button
const locationSpan = document.getElementById('location');
const getLocationButton = document.getElementById('getLocation');
            

---

This below mentioned code adds a click event listener to the getLocation button. When the button is clicked, it checks if navigator.geolocation property is available in the browser. If it is, it calls navigator.geolocation.getCurrentPosition() method to get the user's current position. This method takes two callback functions as parameters: one to handle the successful case, and another to handle errors.

JavaScript

  getLocationButton.addEventListener('click', () => {
  // check if geolocation is supported
  if (navigator.geolocation) {
    // get current position
    navigator.geolocation.getCurrentPosition(position => {
      const { latitude, longitude } = position.coords;
      locationSpan.textContent = `Latitude: ${latitude}, Longitude: ${longitude}`;
    }, error => {
      locationSpan.textContent = `Error: ${error.message}`;
    });
  } else {
    locationSpan.textContent = 'Geolocation is not supported by this browser.';
  }
});