Scribd
Upload
4 views

smartyy geolocation code

Uploaded by

jiooalpha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

smartyy geolocation code

Uploaded by

jiooalpha
Copyright
© © All Rights Reserved
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