testmap.html

<div id="map" style="height: 500px; width: 100%"></div>
<script>
	function initMap() {
		const map = new google.maps.Map(document.getElementById('map'), {
			center: { lat: 40.0076, lng: -105.265 }, // CU Boulder coordinates
			zoom: 14,
		});

		// Add a shaded area (polygon for CU Boulder campus)
		const polygonCoords = [
			{ lat: 40.0076, lng: -105.265 },
			{ lat: 40.0076, lng: -105.258 },
			{ lat: 40.004, lng: -105.258 },
			{ lat: 40.004, lng: -105.265 },
			{ lat: 40.004, lng: -105.272 },
			{ lat: 40.0076, lng: -105.272 },
		];
		new google.maps.Polygon({
			paths: polygonCoords,
			strokeColor: '#FF0000',
			strokeOpacity: 0.8,
			strokeWeight: 2,
			fillColor: '#FF0000',
			fillOpacity: 0.35,
			map,
		});

		// Function to generate random coordinates within a mile
		function getRandomCoordinates(center, radius) {
			const latOffset = (Math.random() - 0.5) * (radius / 69); // 69 miles per degree latitude
			const lngOffset =
				(Math.random() - 0.5) *
				(radius / (69 * Math.cos((center.lat * Math.PI) / 180))); // Adjust for longitude
			return {
				lat: center.lat + latOffset,
				lng: center.lng + lngOffset,
			};
		}

		// Add random pins within a mile of CU Boulder
		for (let i = 0; i < 10; i++) {
			// Change 10 to the number of pins you want
			const randomPosition = getRandomCoordinates(
				{ lat: 40.0076, lng: -105.265 },
				1
			);
			new google.maps.Marker({
				position: randomPosition,
				map,
				title: `Random Pin ${i + 1}`,
			});
		}
	}
</script>
<script
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIkAjgFJXLMiWMXcg0IzORb9rk9I33cak&callback=initMap"
	async
	defer
></script>