谷歌地图加载奇怪 [英] Google Maps loading strangely
问题描述
我在我的网站上使用Google Maps API（v3）以某个位置为中心显示地图。
这是我的代码：
< script type =text / javascript>
$（document）.ready（function（）{
var latlng = new google.maps.LatLng（-22.924484，-43.208001）;
var map = new google.maps.Map（ document.getElementById（map-property2），{
zoom：13，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
}）;
< / script>
在我的< head> 我有：
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no />
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
以下是结果：
正如你所看到的，它就像有两张地图那里..但是如果我调整窗口的大小，地图是固定的！
还有一个问题：请参阅地图的最左上角？这是 Ps .:我的Firebug JS控制台没有错误或警告。 我在这里找到了一个解决方案： Major使用API V3的谷歌地图故障 测试它后，我发现另一件事：我试图在隐藏的div上加载地图（不是地图画布，但容器有它），当我点击一个标签菜单时显示。 如果地图加载（使用 我正在疯狂......真的。 问题是因为您无法加载隐藏容器的地图...我的解决方案是在显示选项卡后加载地图，这个代码： I'm using the Google Maps API (v3) on my website to show a map centered in a certain position. This is my code: At the end of my Here's the result: As you can see it's like there's two maps there.. But if I resize the window the map is fixed! There's another problem: See the very top left corner of the map? This is the location of Ps.: There's no error or warning on my Firebug JS console. I found a solution here: Major Google Maps glitch using API V3 And testing it I discovered another thing: I'm trying to load the map on a hidden div (not the map canvas, but the container that has it) that is shown when I click on a tab menu. If the map load (using I'm goin mad... really. The problem is because you can't load the map with the container hidden... My solution was load the map after the tab is shown, with this code:
这篇关于谷歌地图加载奇怪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ latlng 变量的位置。这应该是地图的中心，但它会作为左上角加载。 ：/ b
$ b
setTimeout ）当选项卡处于活动状态且容器可见时，地图加载正常。
$（'ul.tabs li a [rel =location]'）。click（function （）{
setTimeout（function（）{
var latlng = new google.maps.LatLng（-22.924484，-43.208001）;
var map = new google.maps.Map（document.getElementById（map-property2），{
zoom：15，
center：latlng，
mapTypeId：google。 maps.MapTypeId.ROADMAP
}）;
var marker = new google.maps.Marker（{
position：latlng，
map：map，
title：Property location
} ）;
}，500）;
}）;
<script type="text/javascript">
$(document).ready(function() {
var latlng = new google.maps.LatLng(-22.924484, -43.208001);
var map = new google.maps.Map(document.getElementById("map-property2"), {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
</script>
<head> I have:<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
latlng variable.. That should be the center of the map, but it load as the top-left corner. :/
setTimeout) when the tab is active and the container is visible, the map loads ok.$('ul.tabs li a[rel="location"]').click(function() {
setTimeout(function() {
var latlng = new google.maps.LatLng(-22.924484, -43.208001);
var map = new google.maps.Map(document.getElementById("map-property2"), {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Property location"
});
}, 500);
});
