Wix嵌入Google Maps HTML代码后右侧滚动条无法移除的求助

各位大佬，求助！我在Wix网站里嵌入了Google Maps的HTML代码后，页面右侧多出了一条滚动条，怎么都弄不掉。

我先是试着把地图的宽度从1500px改成500px做测试，结果滚动条依然存在。我猜会不会是Wix本身的站点设计有问题？但能想到的调整方式我都试过了，还是没解决。会不会是HTML代码里除了地图宽度之外的其他部分导致的呢？

以下是我使用的完整HTML代码：

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

备注：内容来源于stack exchange，提问作者Daniel Lip