Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps Api</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link href="style.css" rel="stylesheet">
    <link href="loadbar.css" rel="stylesheet">
</head>

<body>
<div id="map"></div>

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

<style>#map
    {
        width: 150px;
        height:90px;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }

    #map.fullscreen {
        position: fixed;
        width:100%;
        height: 100%;
      }</style>

<script
      src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&v=weekly&language=he"
      defer
    ></script>

<script>let map;

    function initMap() {
        // The location of Uluru
        const uluru = { lat: 32.1582615544072, lng: 34.89155037133181 };
        // The map, centered at Uluru
        map = new google.maps.Map(document.getElementById("map"), {
          zoom: 11,
          center: uluru,
          disableDefaultUI: true,
          fullscreenControl: true,

          options: {
    gestureHandling: 'greedy'
  }
        });


        // Create the DIV to hold the control.
      const centerControlDiv = document.createElement("div");
      // Create the control.
      const centerControl = createCenterControl(map);
      // Append the control to the DIV.
      centerControlDiv.appendChild(centerControl);
      map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerControlDiv);

        const chicago = { lat: 41.85, lng: -87.65 };

        /**
         * Creates a control that recenters the map on Chicago.
         */
        function createCenterControl(map) {
          const controlButton = document.createElement("button");

          // Set CSS for the control.
          controlButton.style.backgroundColor = "#fff";
          controlButton.style.border = "2px solid #fff";
          controlButton.style.borderRadius = "3px";
          controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
          controlButton.style.color = "rgb(25,25,25)";
          controlButton.style.cursor = "pointer";
          controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
          controlButton.style.fontSize = "16px";
          controlButton.style.lineHeight = "28px";
          controlButton.style.borderLeftWidth = "8px";
          controlButton.style.margin = "8px 8px 22px 0";
          controlButton.style.padding = "0 5px";
          controlButton.style.textAlign = "center";
          controlButton.textContent = "Center Map";
          controlButton.title = "Click to recenter the map";
          controlButton.type = "button";

          // Setup the click event listeners: simply set the map to Chicago.
          controlButton.addEventListener("click", () => {
            map.setCenter(chicago);
          });
          return controlButton;
        }

        const rectangle = new google.maps.Rectangle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map,
            bounds: {
                north: uluru.lat - 0.005,
                south: uluru.lat + 0.005,
                west: uluru.lng - 0.005,
                east: uluru.lng + 0.005,
            },
          });

}

      window.initMap = initMap;</script>
</body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="loadbar.js" type="text/javascript"></script>
<div class='progress' id="progress_div">


  <h1 id="loading-message">...טוען מפה</h1>
   <div class='bar' id='bar1'></div>
   <div class='percent' id='percent1'></div>
</div>

<div i
   <div id="content">


   </div>
</div>

<input type="hidden" id="progress_width" value="0">
<div>

</html>