How to remove the scroll bar on the right?

Question

I added html embed code and then the scroll bar is on the right. I tried to change the map width from 1500px to 500px just for testing, but the scroll bar is still remained.

Maybe it's something with the site design in wix? but I tried everything I can think of. Maybe something else in the html code then the width of the map?

this is the html code:

<!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>
</head>

<body>
<div id="map"></div>
  
<style>#map
    {
        width: 1500px;
        height:900px;
        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>
</html>

try solution here https://stackoverflow.com/questions/3296644/hiding-the-scroll-bar-on-an-html-page and add CSS to the scrollable element — jjj, Feb 28 '23 at 15:20

score 1 · Answer 1 · answered Feb 28 '23 at 16:31

Instead of giving px units to your #map to fill the screen, simply give it this:

#main {
  width: 100vw;
  height: 100vh;
}

Full code:

<!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>
</head>

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

  <style>
    #map {
      width: 100vw;
      height: 100vh;
      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>

</html>

How to remove the scroll bar on the right?

1 Answers1

Full code: