JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var map = null;
    
   var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43,-79.5),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map"),
                                myOptions);

  google.maps.event.addListenerOnce(map, "bounds_changed", function() {
    var bounds = map.getBounds();
    var major_axis = google.maps.geometry.spherical.computeDistanceBetween(bounds.getNorthEast(), new google.maps.LatLng(bounds.getSouthWest().lat(),bounds.getNorthEast().lng()))/2;
    var minor_axis = google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(bounds.getCenter().lat(),bounds.getSouthWest().lng()),
        new google.maps.LatLng(bounds.getCenter().lat(),bounds.getNorthEast().lng()))/2;
        
    // === Ellipse ===
    var point = map.getCenter(); // new google.maps.LatLng(43,-78);
    var ellipse = google.maps.Polygon.Ellipse(point,major_axis,minor_axis,0,"#000000",2,1,"#ffff00",0.5);
    ellipse.setMap(map);
  });

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    
    // EShapes.js
//
// Based on an idea, and some lines of code, by "thetoy" 
//
//   This Javascript is provided by Mike Williams
//   Community Church Javascript Team
//   http://www.bisphamchurch.org.uk/   
//   http://econym.org.uk/gmap/
//
//   This work is licenced under a Creative Commons Licence
//   http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0 04/Apr/2008 Not quite finished yet
// Version 1.0 10/Apr/2008 Initial release
// Version 3.0 12/Oct/2011 Ported to v3 by Lawrence Ross
      google.maps.Polygon.Ellipse = function(point,r1,r2,rotation,strokeColour,strokeWeight,Strokepacity,fillColour,fillOpacity,opts) {
  ...