jerry42/google_map_blue_dot.html

## google_map_blue_dot.html
<!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>
	<!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>