Javascript 基于div大小的googlemapsapi

我正在为一个项目做一个网页。 我需要在上面插入一张带标记的地图

我做了，但地图不想呆在舱里。 你知道我怎样才能把地图放在那个分区的边界里吗

映射HTML

<div name="map" id="map" class="hexabox">
    <h2>_map();</h2>
    <div id="mapc" class="hexabox">                         
            <script>
              function initMap() {
                var xcoord = <?= $data[9]; ?>;
                var ycoord = <?= $data[10]; ?>;

                var coord = {lat: xcoord, lng: ycoord};
                var map = new google.maps.Map(document.getElementById('map'), {
                  size:"50%",
                  zoom: 9,
                  center: coord
                });
                var marker = new google.maps.Marker({
                  position: coord,
                  map: map
                });
              }
            </script>
            <script async defer
            src="https://maps.googleapis.com/maps/api/js?key= AIzaSyCfo8F5YCR3mv7o5pora6YRPOJNP_9_xAA &callback=initMap">
            </script>

    </div>
    <div id="container" class="hexabox">empty_div</div>
</div>

无地图的Div（地图必须保持在灰色区域）

带地图的Div

谢谢，对不起，英语不好

var map = new google.maps.Map(document.getElementById('map'), {

应该是：

var map = new google.maps.Map(document.getElementById('mapc'), {

如果您希望映射现在位于maps div.中，则映射将进入父容器（#map）

var map = new google.maps.Map(document.getElementById('mapc'), {