JSFiddle - React, Tailwind, and code Playground

by seddass

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
 <div id="map_canvas"></div>

CSS

#map_canvas { height: 200px; }

JavaScript

if (typeof(Number.prototype.toRad) === "undefined") {
  Number.prototype.toRad = function() {
    return this * Math.PI / 180;
  }
}

if (typeof(Number.prototype.toDeg) === "undefined") {
  Number.prototype.toDeg = function() {
    return this * 180 / Math.PI;
  }
}

var dest = function(lat,lng,brng, dist) {
    this._radius = 6371;
    dist = typeof(dist) == 'number' ? dist : typeof(dist) == 'string'
           && dist.trim() != '' ? +dist : NaN;
    dist = dist / this._radius;
    brng = brng.toRad();  
    var lat1 = lat.toRad(),
        lon1 = lng.toRad();
    var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
        Math.cos(lat1) * Math.sin(dist) *
        Math.cos(brng));
    var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
        Math.cos(lat1), Math.cos(dist) -
        Math.sin(lat1) * Math.sin(lat2));
    lon2 = (lon2 + 3 * Math.PI) % (2 * Math.PI) - Math.PI;
    return new google.maps.LatLng(lat2.toDeg(),lon2.toDeg());
}
        
var startlat = -34.397
    ,startlng = 150.644
    ,dist = 30
    ,latlng = new google.maps.LatLng(startlat,startlng)
    ,myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    ,map = new google.maps.Map(
        document.getElementById("map_canvas"),myOptions)
    ,mybox = new google.maps.LatLngBounds(
        dest(startlat,startlng,225,dist),
        dest(startlat,startlng,45,dist) 
    )
    ,rectangle = new google.maps.Rectangle()
    ,rectOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map,
        bounds: mybox
    };

rectangle.setOptions(rectOptions);