我有一个网页，其中包含使用<div>的隐藏display: none;，并且我在页面上有一个按钮，点击该按钮会更改<div>的可见性和叠加层它在其他一切之上（因为它有一个z-index集）。
在这个<div>中，我使用iFrame嵌入了谷歌地图，谷歌地图引脚被放置在我试图向用户显示的位置。
由于Google地图iFrame在页面加载时加载，而<div>被隐藏，这意味着当<div>显示时Google地图未正确对齐（图钉和中心位置）现在位于左上角）
我知道有些人可能会告诉我“应该”重新整理整个页面的方法。我实际上正在寻找的是我可以设置的某种onClick函数，它将重新加载iFrame，以便地图正确居中。
此iframe有一个Google地图页面作为其src。即一个URL而不是我网站上文件的链接。
任何帮助将不胜感激！我在网上搜索的很多代码似乎都在刷新引用的特定文件而不是外部URL。
如果我将地图嵌入另一个HTML文件中，然后将该HTML文件作为框架源放置，它会起作用吗？
答案 0 :(得分：16)
我有类似的问题并通过jquery改变div的css样式，并改变我放置谷歌地图iframe的地方来解决它。
jquery代码：
<script type="text/javascript">
$(function(){
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
});
});
</script>
HTML： 我有链接和谷歌地图iframe加载内联到div与display：none css样式。因为display：none样式使div宽度：0和height：0，所以google map中请求的地址无法正常显示。
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none">google_map_iframe_here</div>
jquery代码
<script type="text/javascript">
$(function() {
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
$("#map").html('google_map_iframe_here').css('display','block');
});
});
</script>
HTML：我以前用于放置地图的div是空的，因为我只在点击链接时才加载地图，此时我将显示的css样式从display：none更改为：block，so地图显示得很好。
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none"></div>
希望这有帮助！ 有一个很好的编码日！
答案 1 :(得分：7)
我不是专业人士，但是我从body标签中删除了onload =“initialize（）”并将其更改为onclick =“initialize（）”在取消隐藏div的按钮中。这似乎现在有效。
答案 2 :(得分：7)
我没有使用iframe（我正在使用Google Maps API的第3版），但由于“隐藏”div而导致“不正确对齐”问题。我的修复，而不是使用display：none，它完全从DOM中删除了它，我使用了可见性和高度，如下所示：
.myMapDiv {
visibility: hidden;
height: 0px;
}
我相信正在发生的事情是因为'visibility：hidden'实际上将元素保留在DOM中，因此地图能够按预期呈现。我已经在FF / Chrome / IE 7-9中进行了测试，到目前为止似乎没有问题。
答案 3 :(得分：2)
在互联网上搜索了几个小时并且没有得到任何结果后，我决定尝试将我的内容作为关于我的问题的最后一面注释，并且它有效！
我只是制作了第二个名为 map.html 的文件，代码内部字面意思是：
<html>
<iframe> </iframe>
</html>
显然是谷歌地图来源，然后在我的主页面中，src的iframe链接到 pages / map.html ，而不是谷歌地图链接。
答案 4 :(得分：2)
你可以像这样刷新iframe：
var myIframe = jQuery('#myIframe');
myIframe.attr('src',myIframe.attr('src')+'');
答案 5 :(得分：1)
而不是使用display:none隐藏div，请使用position: absolute; top: -9999px; left: -9999px
然后，当您想要显示该div的内容时，请将这些属性设置为position: static; top: auto; left: auto或类似的内容
答案 6 :(得分：1)
我有同样的问题，我的解决方案是设置div和amp; iframe为0px高度，然后在切换时将其更改为所需的高度。
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var ifr = document.getElementById("iframe");
var text = document.getElementById("displayText");
if(ele.style.visibility == "visible") {
ele.style.visibility = "hidden";
ele.style.height = "0px";
ifr.style.height = "0px";
text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
}
else {
ele.style.visibility = "visible";
ele.style.height = "420px";
ifr.style.height = "420px";
text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
}
}
</script>
<div id="mb">
<a id="displayText" href="javascript:toggle();"><img src="#" border="0" width='180' height='65'></a>
</div>
<div id="toggleText" style="visibility: hidden; height: 0px;">
<p><iframe id="iframe" style="height: 0px;" src=#" width="650">
</iframe></div>
答案 7 :(得分：1)
<script type="text/javascript">
$(document).ready(function (){$("#showMap").slideUp();})
</script>
<script type="text/javascript">
function showMap()
{
$("#showMap").slideToggle();
}
</script>
<a href="#mapa" onClick="showMap();">Show / Hide Map</a>
<div id="showMap" style="margin-left:15px; width:615px; height:400px;">
<?php require_once "map.php";?>
</div>
答案 8 :(得分：1)
有一个使用css和jQuery的解决方案。 首先，你需要一个没有高度的包装器div，它将包含iframe。
通过这种方式，iframe将正常加载而根本不可见。 接下来使用jQuery，您可以显示/隐藏iframe。
HTML
<div id="map-show">Show Map</div>
<div id="map-hide">Hide Map</div>
<div id="map-wrapper" style="height:0; overflow:hidden;">
<div id="gmap">
<iframe width="850" height="650" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="xxx"></iframe>
</div>
</div>
CSS
.hidden {
display: none;
}
的jQuery
$(document).ready(function() {
$('#map-show').on('click',function(){
// Remove class hidden from map - Display map
$('#gmap').removeClass('hidden');
// Set height to map container div - ONLY one time needed
$('#map-wrapper').css('height', 'auto');
});
$('#map-hide').on('click',function(){
// Add class hidden to map - Hide map
$('#gmap').addClass('hidden');
});
}）;
答案 9 :(得分：0)
您可以使用隐藏的可见性并使用jQuery来显示和隐藏它。
$('click-button').click(function(){
var visibility = $("hidden-div").css("visibility");
if (visibility == "hidden")
$("hidden-div").css("visibility","visible");
else
$("hidden-div").css("visibility","hidden");
});
答案 10 :(得分：0)
这是一个完全不需要编程的解决方案！
获取嵌入代码时，单击“自定义并预览嵌入式地图”，然后向下并向右拖动地图，使推针位于右下角，然后抓取新的嵌入代码。
当地图以隐藏模式居中时，展开时仍会正确显示。 （我知道并不完美，但如果您真正想要的是推针在地图上显示，那么完全有效）
答案 11 :(得分：0)
同样的问题，简单的解决方案。
隐藏在html流中的css隐藏空间。我不知道屏幕外的css位置是否在每个设备上被广泛接受并且完全隐藏了一个块。 jquery很适合使用块宽和高度。
的CSS：
#map {overflow:hidden; float:left;}
HTML：
<a href="#" id="btn_show">show</a>
<a href="#" id="btn_hide">hide</a>
<div id="map">
<iframe width="100%" src="http://maps.google.com/maps f=q&source=s_q&hl=en&geocode=&ie=UTF8&iwloc=A&output=embed ...>
</div>
的javascript：
var w=sames as gmap width;
var h=sames as gmap height;
$(document).ready(function(){
$("#map").width(0);
$("#map").height(0);
$("#btn_show").click(function(){
$("#map").show();
$("#map").width(w);
$("#map").height(h);
});
$("#btn_hide").click(function(){
$("#map").hide();
});
})
答案 12 :(得分：0)
我一直在努力做这样的事情。我最初添加的课程.hidden是display: none;。但是当我切换.hidden时，地图不会居中。我发现等到地图完全加载后，在添加类idle之前使用.hidden事件侦听器解决了我的所有显示问题。
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
$mapContainer.addClass('hidden');
});
答案 13 :(得分：0)
我也遇到了同样的问题。
使用iframe作为外部资源。
确保iframe元素的name属性与a元素的target属性相同
灵感来自https://developers.google.com/maps/documentation/javascript/
答案 14 :(得分：-1)
：
#googleMap { visibility: hidden; }
原创
beim Klick der dieKarteöffnensolljQuery：
修改
当你点击打开地图时，jQuery：
$('#googleMap')
.css('display','none')
.css('visibility','visible')
.fadeIn(500);
});