JSFiddle - React, Tailwind, and code Playground

by johannpickard

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Custom Overlays</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    
    // 
    <input type="range" min="0" max="360" value="0" id="overlayslider">
    <button onclick="myFunction()">Reset rotation slider</button>
        
    // 
    <input type="range" min="0" max="360" value="0" id="overlayslider">
    <button onclick="myFunction()">Reset Size slider</button>
    
    
    
    
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      // This example creates a custom overlay called USGSOverlay, containing
      // a U.S. Geological Survey (USGS) image of the relevant area on the map.

      // Set the custom overlay object's prototype to a new instance
      // of OverlayView. In effect, this will subclass the overlay class therefore
      // it's simpler to load the API synchronously, using
      // google.maps.event.addDomListener().
      // Note that we set the prototype to an instance, rather than the
      // parent class itself, because we do not wish to modify the parent class.

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

      // Initialize the map and the custom overlay.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 11,
          center: {lat: 62.323907, lng: -150.109291},
          mapTypeId: 'satellite'
        });

// I thin that the image bounds makes the image bigge or smaller
// it warps the image though
        var bounds = new google.maps.LatLngBounds(
            new...