如何在Google Maps上浮动div并保持全屏显示？

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

#map {
  width: 100%;
  height: 100%;
}

#floatingDiv {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 5px;
  z-index: 1;
}

// 创建地图
var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 37.7749, lng: -122.4194}, // 设置地图中心点坐标
  zoom: 12 // 设置地图缩放级别
});

// 创建浮动div
var floatingDiv = document.getElementById('floatingDiv');

// 更新浮动div的位置和大小
function updateFloatingDiv() {
  var mapWidth = document.getElementById('map').offsetWidth;
  var mapHeight = document.getElementById('map').offsetHeight;
  floatingDiv.style.width = mapWidth * 0.2 + 'px'; // 设置浮动div的宽度为地图宽度的20%
  floatingDiv.style.height = mapHeight * 0.2 + 'px'; // 设置浮动div的高度为地图高度的20%
  floatingDiv.style.top = mapHeight * 0.1 + 'px'; // 设置浮动div的top位置为地图高度的10%
  floatingDiv.style.left = mapWidth * 0.1 + 'px'; // 设置浮动div的left位置为地图宽度的10%
}

// 监听地图的bounds_changed事件，更新浮动div的位置
google.maps.event.addListener(map, 'bounds_changed', function() {
  updateFloatingDiv();
});

// 初始化时更新浮动div的位置
updateFloatingDiv();