我正在尝试将带有标记的谷歌地图添加到我的表单中以帮助用户选择位置,但它出错了。将谷歌地图添加到页面时出错
正如你看到的,地图上没有正确地在其区域中显示。我在地图上放置了一个标记,并在那里设置了中心,但该标记的位置不正确,它隐藏在初始地图之外(位于上图中的右上角,而不是中间)。
当我击中F12按钮启用萤火虫(在Firefox),地图显示正确
下面是创建的形式和添加谷歌地图的代码:
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();
});
任何人都可以帮助我找出问题在这里,我甚至不知道如何解释它到谷歌。