JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Tilt and Rotation</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta&channel=2"
      async
    ></script>
  </body>
</html>

CSS

/* 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;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: #ebebeb;
}

JavaScript

let historicalOverlay;
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 24.960864, lng: 55.150841 },
    zoom: 16,
    tilt: 45,
    heading: 120,
    mapId: "90f87356969d889c",
  });
    const imageBounds = {
    north: 24.9717265,
    south: 24.9500015,
    east: 55.161841,
    west: 55.139841,
  };

  historicalOverlay = new google.maps.GroundOverlay(
    "https://res.cloudinary.com/defmmlrqg/image/upload/a_120/v1646695548/test/img32_iidhie.jpg",
    imageBounds
  );
  historicalOverlay.setMap(map);
}