2013-01-21 32 views
-1

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

Error when entering the form

正如你看到的,地图上没有正确地在其区域中显示。我在地图上放置了一个标记,并在那里设置了中心,但该标记的位置不正确,它隐藏在初始地图之外(位于上图中的右上角,而不是中间)。

当我击中F12按钮启用萤火虫(在Firefox),地图显示正确 The map display correctly when enable firebug

下面是创建的形式和添加谷歌地图的代码:

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(); 
}); 

任何人都可以帮助我找出问题在这里,我甚至不知道如何解释它到谷歌。

回答

0

给你的map_canvas一个固定的大小(以像素为单位,不是百分比),并移除position = relative。如果你使用百分比,父节点也必须有一个大小,否则它是没有意义的(100%是什么?)。

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

看来您使用了选项卡。

如果是,则必须在选中带有地图的选项卡时触发地图的调整大小事件。