谷歌地图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; 
} 

事业部没有地图（地图必须留在灰色地带） http://prntscr.com/dn8viy

股利地图 http://prntscr.com/dn8vwq

钍anks和抱歉不好英语

Answer 1

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

应该是：

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

，如果你想在地图要在地图DIV。现在，地图进入父容器（#map）。