<!DOCTYPE html>
<html>
<head>
<title>Google Maps with GPS Integration</title>
<script src= »https://maps.googleapis.com/maps/api/js?key=AIzaSyDX_HeHiVcwg7a5HfRLRqGLzk9gla4b_Tc&callback=initMap » async defer></script>
<script>
let map;
let marker;
function initMap() {
map = new google.maps.Map(document.getElementById(‘map’), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
marker = new google.maps.Marker({
map: map,
position: { lat: -34.397, lng: 150.644 }
});
if (navigator.geolocation) {
navigator.geolocation.watchPosition(updatePosition);
} else {
alert(« Geolocation is not supported by this browser. »);
}
}
function updatePosition(position) {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
marker.setPosition(pos);
map.setCenter(pos);
}
</script>
</head>
<body>
<div id= »map » style= »height: 500px; width: 100%; »></div>
</body>
</html>