JSFiddle - React, Tailwind, and code Playground

by tujger

HTML

distance, meters:<input type="text" name="distance" value="500"><br />
zoom level:<input type="text" name="zoom"><br />
calculated pixels: <input type="text" name="result" disabled>
<p>
width in pixels: <input type="text" name="pixels"><br/>
calculated zoom:<input type="text" name="zoom2" disabled><br />

JavaScript

test: function() {
				this.map.setZoom(11);
				self.maximumMarkers = 10;
				var a = [];
				a.push({
						latitude: 38.9,
						longitude: -77.2,
						rotation: 60
				});
				a.push({
					latitude: 38.91,
					longitude: -77.33,
			        rotation: 270
				});
				a.push({
						latitude: 38.95,
						longitude: -77.1,
				        rotation: 45
				});
				a.push({
						latitude: 38.99,
						longitude: -77.4,
				        rotation: 210
				});
				/*a.push({
					latitude: 38.7,
					longitude: -77.2,
					rotation: 320
				});*/
				
				var p= [];
				for(var i in a) {
					var b = new google.maps.LatLng(a[i].latitude, a[i].longitude);
					b.rotation = a[i].rotation; 
					p.push(b);
					this.putMarker({
						latitude: a[i].latitude,
						longitude: a[i].longitude,
						icon: {
					        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
					        scale: 6,
					        rotation: a[i].rotation
					    }
					});
				}
				
				var bounds = new google.maps.LatLngBounds();
				for(var i in p) {
					bounds.extend(p[i]);
				}
				console.log(bounds);
				
				
				var poly = [
					new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()),
					new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getNorthEast().lng()),
					new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()),
					new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getSouthWest().lng())
				]
				
				new google.maps.Polygon({
					map: this.map,
					paths: poly
				})
				
				var m = p[0];
				var c = bounds.getCenter();
				this.putMarker({
					latitude: c.lat(),
					longitude: c.lng(),
					icon: {
				        path: google.maps.SymbolPath.CIRCLE,
				        scale: 6,
				        stroke: "red"
				    }
				});
				var rot = [];
				var alpha = m.rotation;
				var bounds = new google.maps.LatLngBounds();
				
				for(var i in p) {
					
					var a = p[i];
					var lng = c.lng() + (a.lng() - c.lng()) *...