Scribd
Upload
8 views

smartyy geolocation code

Uploaded by

jiooalpha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

smartyy geolocation code

Uploaded by

jiooalpha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html>
<head>
<title>Location Pointer</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
rel="stylesheet">
<style>
{
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}

.location-box {
display: flex;
align-items: center;
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#detect-button {
background-color: #E02B2B;
color: #fff;
border: none;
border-radius: 50%;
padding: 5px 10px;
font-size: 24px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
}

#detect-button:hover {
background-color: #E02B2B;
}

#address-text {
flex: 1;
font-size: 16px;
color: #555;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="location-box">
<button id="detect-button" title="Detect Location"><i class="fas
fa-map-marker-alt"></i></button>
<div id="address-text">Detecting location...</div>
</div>
<script>
// Function to get user's geolocation data
function getUserLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;

// Using Google Maps API to reverse geocode the coordinates


const geocoder = new google.maps.Geocoder();
const latlng = { lat: latitude, lng: longitude };

geocoder.geocode({ 'location': latlng }, (results, status) => {


if (status === google.maps.GeocoderStatus.OK) {
if (results[0]) {
const address = results[0].formatted_address;
document.getElementById('address-text').textContent = address;
} else {
document.getElementById('address-text').textContent = 'Address not
found.';
}
} else {
console.log('Geocoder failed due to: ' + status);
document.getElementById('address-text').textContent = 'Address not
found.';
}
});
},
(error) => {
console.log('Geolocation is not available or permission is denied.');
document.getElementById('address-text').textContent = 'Location permission
denied.';
}
);
} else {
console.log('Geolocation is not supported by your browser.');
document.getElementById('address-text').textContent = 'Geolocation not
supported.';
}
}

// Auto-detect location on page load


document.addEventListener('DOMContentLoaded', () => {
getUserLocation();
});

// Event listener for the "Detect Location" button


document.getElementById('detect-button').addEventListener('click', () => {
getUserLocation();
});
</script>

<!-- Add the Google Maps API script -->


<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyA2nbFcaYtadx9kwxsGqIuod3OXatMaRpc&libraries=places"></script>
</body>
</html>

You might also like