Scribd
Upload
14 views2 pages

Geolocation Tracking with Google Maps

The document contains JavaScript code for a web application that tracks user location using the Geolocation API and displays it on a Google Map. It initializes a map centered on New York, updates the map with the user's current location, and stores the location data in local storage. The application also handles errors related to geolocation requests and provides user feedback through alerts and on-screen information.

Uploaded by

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

Geolocation Tracking with Google Maps

The document contains JavaScript code for a web application that tracks user location using the Geolocation API and displays it on a Google Map. It initializes a map centered on New York, updates the map with the user's current location, and stores the location data in local storage. The application also handles errors related to geolocation requests and provides user feedback through alerts and on-screen information.

Uploaded by

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

let map;

let marker;
let locations = [Link]([Link]('locations')) || [];

function initMap() {
// Initialize map centered on a default location (e.g., New York)
map = new [Link]([Link]('map'), {
center: { lat: 40.7128, lng: -74.0060 },
zoom: 10
});
}

function trackLocation() {
if ([Link]) {
[Link](showPosition, showError, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
} else {
alert("Geolocation is not supported by this browser.");
}
}

function showPosition(position) {
const lat = [Link];
const lng = [Link];
const timestamp = new Date().toLocaleString();

// Update map and marker


const pos = { lat, lng };
[Link](pos);
if (marker) [Link](null); // Remove old marker
marker = new [Link]({
position: pos,
map: map,
title: `Location at ${timestamp}`
});

// Display info
[Link]('locationInfo').innerHTML = `
<p><strong>Latitude:</strong> ${lat}</p>
<p><strong>Longitude:</strong> ${lng}</p>
<p><strong>Timestamp:</strong> ${timestamp}</p>
<p><strong>Accuracy:</strong> ${[Link]} meters</p>
`;

// Store in local storage


[Link]({ lat, lng, timestamp });
[Link]('locations', [Link](locations));
}

function showError(error) {
switch([Link]) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case [Link]:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}

// Event listener for button


[Link]('trackBtn').addEventListener('click', trackLocation);

// Initialize map on load


[Link] = initMap;

You might also like