JSFiddle - React, Tailwind, and code Playground

by malonso

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!--<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>-->
<script>
/*
 * This demo illustrates the coordinate system used to display map tiles in the
 * API.
 *
 * Tiles in Google Maps are numbered from the same origin as that for
 * pixels. For Google's implementation of the Mercator projection, the origin
 * tile is always at the northwest corner of the map, with x values increasing
 * from west to east and y values increasing from north to south.
 *
 * Try panning and zooming the map to see how the coordinates change.
 */

/** @constructor */
function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  return div;
};

var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);

function initialize() {
  var mapOptions = {
    zoom: 10,
    center: chicago
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
      0, new CoordMapType(new google.maps.Size(256, 256)));
}

google.maps.event.addDomListener(window, 'load', initialize);
function removeOverlay() {
    map.overlayMapTypes.setAt(0,null);
}

    </script>
<body onload="">
<div id="map-canvas"></div>
<input onclick="removeOverlay();" type=button value="Remove overlay">
</body>

CSS

#map-canvas {
        height: 400px;
        width: 400px;
        margin: 0px;
        padding: 0px
      }