javascript - 在 Bootstrap 中添加谷歌地图容器

Question

我正在尝试将谷歌地图添加到网站，我希望 map 的宽度为 100%，我尝试了以下代码

<section class="bg-primary text-white mb-0" id="about">
  <div class="container">
    <h2 class="text-center text-uppercase text-white">Map</h2>
    <div id="map" style="height=450px"></div>
  </div>
</section>

我已经添加了

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

和js代码

function myMap() {
  var myCenter = new google.maps.LatLng(x, y);

    var mapOptions = {
        center: myCenter,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({position: myCenter});

marker.setMap(map);
}

一旦它显示 map (但 map 不是 100% 宽度，一旦不是，我该如何解决这个问题？

感谢您的帮助。

Answer 1

像这样在html中创建 map 元素或添加css

 <div id="map" style="height:450px;width:100%"></div>

#map{
   width:100%;
}