Last active
April 30, 2024 09:19
-
-
Save jerry42/c1b8e491bf4c88cefe089b8bf8c81777 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Google Maps Blue Dot</title> | |
<style> | |
#map { | |
height: 100%; | |
} | |
html, | |
body { | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
</style> | |
<!-- Don't forget the update the following with your own API KEY --> | |
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&loading=async&callback=initMap"></script> | |
<script> | |
let map; | |
var bluedot_maker = null; | |
var current_lat, current_lng; | |
async function initMap() { | |
const { Map } = await google.maps.importLibrary("maps"); | |
map = new Map(document.getElementById("map"), { | |
center: { lat: 48.8946180733812, lng: 2.378038270812436 }, | |
mapId: "default", | |
zoom: 8, | |
}); | |
monitor_position(map); | |
} | |
const monitor_position = async (map) => { | |
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); | |
var geolocation_options = { | |
enableHighAccuracy: true, | |
timeout: 10000, | |
maximumAge: 0, | |
}; | |
navigator.geolocation.watchPosition( | |
(position) => { | |
var coordinates = position.coords; | |
current_lat = coordinates.latitude; | |
current_lng = coordinates.longitude; | |
console.log(coordinates); | |
if (bluedot_maker == null) { | |
const blueDotImg = document.createElement("img"); | |
blueDotImg.width = 21; | |
blueDotImg.height = 21; | |
blueDotImg.src = "https://upload.wikimedia.org/wikipedia/commons/8/8b/GAudit_BlueDot.png"; | |
bluedot_maker = new AdvancedMarkerElement({ | |
map: map, | |
content: blueDotImg, | |
position: { | |
lat: current_lat, | |
lng: current_lng, | |
}, | |
}); | |
} else { | |
bluedot_maker.position = { | |
lat: current_lat, | |
lng: current_lng, | |
}; | |
} | |
}, | |
(err) => { | |
console.error(err); | |
}, | |
geolocation_options | |
); | |
}; | |
</script> | |
</head> | |
<body> | |
<div id="map"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment