JSFiddle - React, Tailwind, and code Playground

by andy

HTML

<div id='map'></div>
		<form name='poly'>

		  <input type='text' id='coords' />

		  <!-- more before -->

		  <input class='cbarea' type='checkbox' name='cb' data-id=142 />
		  <input type='hidden' name='area' data-id=142 value='A Area' />
		  <input type='hidden' name='latlon' data-id=142 value='
				(11.050885924877363,77.04118423201588),
				(11.050885924877363,77.04342655875233),
				(11.048769408381661,77.04341582991627),
				(11.049074777375772,77.04037956931141)' />

		  <input class='cbarea' type='checkbox' name='cb' data-id=143 />
		  <input type='hidden' name='area' data-id=143 value='B Area' />
		  <input type='hidden' name='latlon' data-id=143 value='
				(11.060885924877363,77.05118423201588),
				(11.060885924877363,77.05342655875233),
				(11.068769408381661,77.05341582991627),
				(11.069074777375772,77.05037956931141)' />

		  <input class='cbarea' type='checkbox' name='cb' data-id=144 />
		  <input type='hidden' name='area' data-id=144 value='C Area' />
		  <input type='hidden' name='latlon' data-id=144 value='
				(11.070885924877363,77.06118423201588),
				(11.070885924877363,77.06342655875233),
				(11.078769408381661,77.06341582991627),
				(11.079074777375772,77.06037956931141)' />

		  <!-- and repeat for all others -->


		</form>
		<script async defer src='//maps.googleapis.com/maps/api/js?callback=initMap'></script>

CSS

body {
			  padding: 0;
			  margin: 0;
			  width: 100%;
			  height: 100vh;
			}

			#map {
			  width: 100%;
			  height: calc(100vh - 10rem);
			}

			form {
			  margin: 1rem auto;
			  padding: 1rem;
			  box-sizing: border-box;
			}

			[type='checkbox'] {
			  width: 2rem;
			  height: 2rem;
			}

			#coords {
			  margin: 1rem;
			  width: calc(100% - 4rem);
			  display: block;
			  clear: both;
			  padding: 1rem
			}

JavaScript

const d = document;

			class MapLabel { // no idea what this is....
			  constructor(args) {
			    return Object.assign({}, args);
			  }
			}



			function initMap() {

			  let polygons = {
			    polys: {},
			    labels: {}
			  };
			  let coords = d.querySelector('#coords');

			  const map = new google.maps.Map(document.querySelector('div#map'), {
			    zoom: 3,
			    center: {
			      lat: 0,
			      lng: 0
			    }
			  });

			  d.forms.poly.addEventListener('change', e => {
			    if (e.target instanceof HTMLInputElement && e.target.type == 'checkbox') {


			      let id = e.target.dataset.id;
			      let area = d.querySelector(`input[name="area"][data-id="${id}"]`);
			      let latlon = d.querySelector(`input[name="latlon"][data-id="${id}"]`);

			      coords.value = latlon.value;

			      if (!polygons.polys.hasOwnProperty(id)) {
			        let path = [];
			        let bounds = new google.maps.LatLngBounds();

			        let pairs = latlon.value.replace(/[\(\)\t]/g, '').trim().split(',');
			        for (let i = 0; i < pairs.length; i += 2) {
			          let lat = pairs[i];
			          let lng = pairs[i + 1];
			          let latlng = new google.maps.LatLng(lat, lng);

			          path.push(latlng);
			          bounds.extend(latlng);
			        }

			        // only green so that it is easily visible!!!
			        let poly = new google.maps.Polygon({
			          _uniqueId: id,
			          paths: path,
			          strokeWeight: 2,
			          fillOpacity: 0.45,
			          fillColor: '#00ff00',
			          strokeColor: '#000000',
			          editable: e.target.checked,
			          draggable: false
			        });

			        let label = new MapLabel({
			          text: `area_lbl ( Id: ${id} )`,
			          position: new google.maps.LatLng(bounds.getCenter()),
			          map: map,
			          fontSize: 14,
			          align: 'center'
			        });

			        poly.setMap(map);

			        polygons.polys[id] = poly;
			   ...