JSFiddle - React, Tailwind, and code Playground

by Eric Blanchette

JavaScript

renderArea: function(area) {

			if (!area) { return; }

			var shape = null,
				cords = [],
				_this = this,
				i = 0,
				bounds = new google.maps.LatLngBounds();

			for (i = 0; i < area.v.length; i = i + 2) {
				cords.push(new google.maps.LatLng(area.v[i], area.v[i + 1]));

			}

			for (i = 0; i < cords.length; i++) {
				bounds.extend(cords[i]);
			}
			area.bounds = bounds;

			if (area.t === 'polygon') {

				shape = new google.maps.Polygon({
					paths: cords,
					strokeColor: this.strokeColor,
					strokeOpacity: this.strokeOpacity,
					strokeWeight: this.strokeWeight,
					fillColor: this.fillColor,
					fillOpacity: this.fillOpacity,
					clickable: true
				});

			} else if (area.t === 'rect') {

				bounds = new google.maps.LatLngBounds();

				for (i = 0; i < cords.length; i++) {
					bounds.extend(cords[i]);
				}

				shape = new google.maps.Rectangle({
					bounds: bounds,
					strokeColor: this.strokeColor,
					strokeOpacity: this.strokeOpacity,
					strokeWeight: this.strokeWeight,
					fillColor: this.fillColor,
					fillOpacity: this.fillOpacity,
					clickable: true
				});
			}

			area.shape = shape;
			shape.area = area;

			this.shapes.push(shape);

			google.maps.event.addListener(shape, 'click', function() {
				_this.onAreaShapeClick(shape);
			});

			if(area.selected){
				this.updateShape(area.shape);
			}

			return;
		},