LC43/igm_collect_coordinates.html

## igm_collect_coordinates.html
<!DOCTYPE html>
<html>
<head>
	<title>IGM - Collect Coordinates</title>
	<script src="https://maps.googleapis.com/maps/api/js?key=<google-key>=initMap"
	  async defer></script>
<script>
var map;
var count = 1;

function initMap() {
	const centerUS = { lat: 39.8283, lng: -98.5795 };
	const zoomLevel = 5;
	map = new google.maps.Map(document.getElementById('map'), {
		center: centerUS,
		zoom: zoomLevel
	});

	// Add a click event listener to the map
	google.maps.event.addListener(map, 'click', (event) => {
		collectCoords( event );
	});
}
function collectCoords( event ) {
	// Get the clicked coordinates
	const clickedLatLng = event.latLng;

	var tbody     = document.getElementById('tb_collected');
	var new_row   = tbody.insertRow();
	const cell_id   = new_row.insertCell( 0 );
	const cell_lat  = new_row.insertCell( 1 );
	const cell_lng  = new_row.insertCell( 2 );
	const cell_name = new_row.insertCell( 3 );

	cell_id.innerHTML  = 'ATTowersProject' + count;
	cell_lat.innerHTML = clickedLatLng.lat();
	cell_lng.innerHTML = clickedLatLng.lng();
	cell_name.innerHTML = 'AT Towers Project ' + count++;
}

</script>
</head>
<body>
	<h1>Collect coordinates for <a href="https://interactivegeomaps.com/">Interactive geo maps</a></h1>
	<p>Click on map to collect coordinates</p>
	<div id="map" style="height: 400px; width: 100%;min-height: 800px"></div>
	<div id="collected">
		<table>
			<thead>
				<th>index</th>
				<th>lat</th>
				<th>lng</th>
				<th>name</th>
			</thead>
			<tbody id="tb_collected">
			</tbody>
		</table>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>IGM - Collect Coordinates</title>
	<script src="https://maps.googleapis.com/maps/api/js?key=<google-key>=initMap"
	async defer></script>
	<script>
	var map;
	var count = 1;

	function initMap() {
	const centerUS = { lat: 39.8283, lng: -98.5795 };
	const zoomLevel = 5;
	map = new google.maps.Map(document.getElementById('map'), {
	center: centerUS,
	zoom: zoomLevel
	});

	// Add a click event listener to the map
	google.maps.event.addListener(map, 'click', (event) => {
	collectCoords( event );
	});
	}
	function collectCoords( event ) {
	// Get the clicked coordinates
	const clickedLatLng = event.latLng;

	var tbody = document.getElementById('tb_collected');
	var new_row = tbody.insertRow();
	const cell_id = new_row.insertCell( 0 );
	const cell_lat = new_row.insertCell( 1 );
	const cell_lng = new_row.insertCell( 2 );
	const cell_name = new_row.insertCell( 3 );

	cell_id.innerHTML = 'ATTowersProject' + count;
	cell_lat.innerHTML = clickedLatLng.lat();
	cell_lng.innerHTML = clickedLatLng.lng();
	cell_name.innerHTML = 'AT Towers Project ' + count++;
	}

	</script>
	</head>
	<body>
	<h1>Collect coordinates for <a href="https://interactivegeomaps.com/">Interactive geo maps</a></h1>
	<p>Click on map to collect coordinates</p>
	<div id="map" style="height: 400px; width: 100%;min-height: 800px"></div>
	<div id="collected">
	<table>
	<thead>
	<th>index</th>
	<th>lat</th>
	<th>lng</th>
	<th>name</th>
	</thead>
	<tbody id="tb_collected">
	</tbody>
	</table>
	</div>
	</body>
	</html>