我在同一页面的 google map 和 jquery 选项卡中遇到问题，这是我的问题链接 http://jsfiddle.net/3AsF7/ 第二张 map 无法正确显示，如果有人以前遇到过这个问题，请帮助我
<body>
<div id="tabs">
<ul>
<li style="outline:none; outline: 0;"> <a href="#tabs-1">Egypt contact</a>
</li>
<li style="outline:none; outline: 0;"> <a href="#tabs-2">Qatar contact</a>
</li>
</ul>
<div id="tabs-1">
<div id="google_img"></div>
</div>
<div id="tabs-2">
<div id="google_img2"></div>
</div>
</div>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(30.037016, 31.216946),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map1 = new google.maps.Map(document.getElementById("google_img"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
function initialize2() {
var mapProp = {
center: new google.maps.LatLng(25.3207920, 51.5294840),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(document.getElementById("google_img2"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize2);
</script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$("#tabs").tabs();
});
</script>
最佳答案
选项卡的问题是加载 map 的面板必须可见。尝试使用 margin-top: -9999em 隐藏面板，等待几秒钟，然后应用您正在使用的 jQuery 选项卡插件。
更好的方法是当用户转到该选项卡时创建 map 。
示例:http://www.misionerosredentoristas.com/#!/casa/1
单击“Cómo llegar”部分，您将看到创建 map 的延迟。
关于javascript - 谷歌地图和 jquery 选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23852877/