JSFiddle - React, Tailwind, and code Playground

by sander_cinnamon

HTML

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

CSS

#map-canvas {
  height: 300px;
  width: 600px;
  background-color: #CCC;
}

JavaScript

var overlay;
    USGSOverlay.prototype = new google.maps.OverlayView();

    function initialize() {
      var mapOptions = {
        zoom: 11,
        center: new google.maps.LatLng(52.4750625, 4.496537),
        mapTypeId: google.maps.MapTypeId.MAP,
        backgroundColor: 'transparent',
        disableDefaultUI: true,
        draggable: true,
        scaleControl: true,
        scrollwheel: true,
        styles: [{
            "featureType": "water",
            "stylers": [{
              "visibility": "off"
            }]
          },
          {
            "featureType": "landscape",
            "stylers": [{
              "visibility": "off"
            }]
          },
          {
            "featureType": "road",
            "stylers": [{
              "visibility": "off"
            }]
          },
          {
            "featureType": "administrative",
            "stylers": [{
              "visibility": "off"
            }]
          },
          {
            "featureType": "poi",
            "stylers": [{
              "visibility": "off"
            }]
          },
          {
            "elementType": "labels",
            "stylers": [{
              "visibility": "off"
            }]
          }
        ]
      };

      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      geocoder = new google.maps.Geocoder();

      var swBound = new google.maps.LatLng(50.73, 3.34);
      var neBound = new google.maps.LatLng(53.56, 7.2);
      var bounds = new google.maps.LatLngBounds(swBound, neBound);
      overlay = new USGSOverlay(bounds, 'https://upload.wikimedia.org/wikipedia/commons/d/d5/Provinces_of_the_Netherlands.svg', map);

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(53.1981962, 5.7976),
        map: map,
        title: 'Cinnamon Interactive'
      });
    }

    function USGSOverlay(bounds, image, map) {
      this.bounds_ = bounds;
      this.image_ = image;
     ...