将Google地图添加到页面时出错

Question

我正在尝试将带有标记的谷歌地图添加到我的表单中，以帮助用户选择位置，但它在某处出错了。

如您所见，地图在其区域中无法正确显示。我已经将一个标记放入地图并在那里设置了中心，但该标记的位置不正确，它隐藏在初始地图之外（在地图的右上角，而不是中心）。

当我点击F12按钮启用Firebug时（在Firefox中），地图显示正确

以下是创建表单和添加Google地图的代码：

index.html文件中的表单：

<div id="map_company" style="float: left; width: 500px;height: 350px;">
 <label style="margin-bottom: 5px;">Chọn vị trí hãng xe trên bản đồ:</label>
 <div id="map_canvas" style="width: 100%; height: 100%; position: relative;"></div>
</div>

脚本文件中的javascript：

//add map to company tab
//Set Center 
var myOptions = 
{
center: new google.maps.LatLng(21.044813, 105.79864),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
  myOptions);
var comMarker = new google.maps.Marker({
position: new google.maps.LatLng(21.044813, 105.79864),
    map: map,
draggable: true
});
google.maps.event.addListener(comMarker, 'dragend', function {
document.getElementById("cLat").value = this.getPosition().lat();
document.getElementById("cLon").value = this.getPosition().lng();
});

任何人都可以帮我解决这个问题，我甚至不知道如何解释它谷歌。

Answer 1

您似乎使用了标签。

如果是，您必须在选择了包含地图的标签后触发地图的调整大小事件。

Answer 2

为map_canvas提供固定大小（以像素为单位，而不是百分比）并删除position = relative。如果你使用百分比，父节点也必须有一个大小，否则没有意义（100％的是什么？）。

<div id="map_canvas" style="width: 400px; height: 300px;"></div>