JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="log">...</div>
<div id="map-canvas"></div>

CSS

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

JavaScript

// https://groups.google.com/forum/?hl=en#!msg/google-maps-api/oJkyualxzyY/pNv1SE7qpBoJ
// http://stackoverflow.com/questions/11849636/maximum-lat-and-long-bounds-for-the-world-google-maps-api-latlngbounds
var mapOptions = {
    center: new google.maps.LatLng(37.286172, 0),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var s = 36.886172;
var n = 37.686172;
var e = -(-121.40929 - -122.20929) / 2;
var w = (-121.40929 - -122.20929) / 2;

var ne = new google.maps.LatLng(n, e);
var sw = new google.maps.LatLng(s, w);

var coords = [
    new google.maps.LatLng(n, w),
    new google.maps.LatLng(n, 180),
    new google.maps.LatLng(n, e),
    new google.maps.LatLng(s, e),
    new google.maps.LatLng(s, 180),
    new google.maps.LatLng(s, w),
    new google.maps.LatLng(n, w)
];

var polygon = new google.maps.Polygon({
    paths: [coords],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#00FF00',
    fillOpacity: 0.35
});

polygon.setMap(map);

google.maps.utils = google.maps.utils || {};
google.maps.utils.MercatorProjection = (function(){ 
    var TILE_SIZE = 256;
    var PIXEL_ORIGIN = new google.maps.Point(TILE_SIZE / 2, TILE_SIZE / 2);
    var PIXELS_PER_LON_DEGREE = TILE_SIZE / 360;
    var PIXELS_PER_LON_RADIAN = TILE_SIZE / (2 * Math.PI);

    // MercatorProjection ========================================
    function MercatorProjection() {
    }
    
    MercatorProjection.prototype.fromLatLngToPoint = function (latLng) {
        var point = new google.maps.Point(0, 0);
        point.x = PIXEL_ORIGIN.x + latLng.lng() * PIXELS_PER_LON_DEGREE;
        
        // Truncating to 0.9999 effectively limits latitude to 89.189. This is
        // about a third of a tile past the edge of the world tile.
        var siny = bound(
            Math.sin(degreesToRadians(latLng.lat())), 
            -0.9999, 0.9999
        );
        point.y =...