谷歌地圖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）。