JSFiddle - React, Tailwind, and code Playground

HTML

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

  
  </body>

CSS

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

JavaScript

"use strict";

// observations
//
// map does wrap around at longitudes +/-180; however, tile display can be
// manipulated to only show up once.
//
// markers placed around longiudes +/-180 will show up twice. Not sure how to
// prevent this.

// HACK FOR LIMITING Y-AXIS, COPY height of DIV used in HTML
var divHeight = 450;

var map;
var allowedBounds;
var latbound;
var lngbound;

var widthPercent;
var heightPercent;

var bounds;
var sw;
var ne;
var width;
var height;

var latLimitByZoom = [87.2, 70, 60];

var latLimit = 90;
var lngLimit = 179.5;

var extendedLatLimit = 120;

/*
var mapLimits = new google.maps.LatLngBounds(
  new google.maps.LatLng(-latLimit, -lngLimit),
  new google.maps.LatLng(latLimit, lngLimit));
*/

// https://developers.google.com/maps/documentation/javascript/examples/map-coordinates

function degreesToRadians(deg) {
  return deg * (Math.PI / 180);
}

function radiansToDegrees(rad) {
  return rad / (Math.PI / 180);
}

function bound(value, opt_min, opt_max) {
  if (opt_min != null) value = Math.max(value, opt_min);
  if (opt_max != null) value = Math.min(value, opt_max);
  return value;
}

var TILE_SIZE = 256;

function fromLatLngToPoint(latLng, map) {
  var point = new google.maps.Point(0, 0);
  var origin = new google.maps.Point(TILE_SIZE/2, TILE_SIZE/2);

  var pixelsPerLonDegree_ = TILE_SIZE / 360;
  var pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);

  point.x = origin.x + latLng.lng() * pixelsPerLonDegree_;

  // 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 = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) *
    -pixelsPerLonRadian_;
  return point;
}

function fromPointToLatLng(point) {
  // value from 0 to 256
  var pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2,
      TILE_SIZE / 2);
  var origin = new...