如何使用bootstrap在Google地图上定位内联文本框和按钮？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div id="map"></div>
    </div>
    <div class="col-md-6">
      <form>
        <div class="mb-3">
          <label for="addressInput" class="form-label">地址</label>
          <input type="text" class="form-control" id="addressInput" placeholder="输入地址">
        </div>
        <button type="submit" class="btn btn-primary">定位</button>
      </form>
    </div>
  </div>
</div>

function initMap() {
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12, // 缩放级别
    center: {lat: 37.7749, lng: -122.4194} // 地图中心点坐标（这里以旧金山为例）
  });

  // 获取表单元素
  var addressInput = document.getElementById('addressInput');
  var submitButton = document.querySelector('button[type="submit"]');

  // 监听表单提交事件
  submitButton.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取输入的地址
    var address = addressInput.value;

    // 创建地理编码器对象
    var geocoder = new google.maps.Geocoder();

    // 地理编码
    geocoder.geocode({address: address}, function(results, status) {
      if (status === 'OK') {
        if (results[0]) {
          // 定位到地址所在位置
          map.setCenter(results[0].geometry.location);

          // 创建标记
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
        } else {
          alert('未找到该地址！');
        }
      } else {
        alert('地理编码失败：' + status);
      }
    });
  });
}

window.onload = function() {
  initMap();
};