关于 div 大小的 Google Maps Api

Question

我正在为一个项目制作网页。 我需要在其上插入带有标记的地图。

我做到了，但地图不想留在 DIV 中。 你知道我怎样才能把那个地图放在那个 div 的边界内吗？

地图 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>

CSS

#map{
    float:left; 
    width:42%;
    height:38%;
    margin-left:2.5%;
    margin-right:5%;
    margin-top:0%;
    margin-bottom:2%;
}

#mapc {
    width:45%;
    height:60%;
    float:left; 
    margin-left:2%;
    margin-right:2%;
    margin-top:5%;
    margin-bottom:5%;
    text-align:center;
    background-color: grey;
}


.hexabox{
    border-style:solid;
    border-width:1px;
    border-color:#0000ff #0000ff;
}

.alertText{
    color:#ff0000;
}

#container{
    width:45%;
    height:60%;
    float:left; 
    margin-left:2%;
    margin-right:2%;
    margin-top:5%;
    margin-bottom:5%;
    text-align:center;
}

没有地图的Div（地图必须留在灰色区域） http://prntscr.com/dn8viy

带地图的 Div http://prntscr.com/dn8vwq

感谢和抱歉英语不好

Answer 1

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

应该是：

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

如果您希望地图位于地图 div 中。现在，地图进入父容器 (#map)。