谷歌地图没有居中，因为 div 是 display:none on page load答案

【问题标题】：Google Maps not centering because div is display:none on page load谷歌地图没有居中，因为 div 是 display:none on page load
【发布时间】：2011-09-21 20:32:07
【问题描述】：

我有一个网页，其中包含一个隐藏的 <div> 使用 display: none; 并且我在页面上有一个按钮，单击该按钮将更改 <div> 的可见性，并将其覆盖在其他所有内容之上（因为它有一个 z-index 集）。

在此<div> 中，我使用 iFrame 嵌入了 Google 地图，其中 Google 地图图钉放置在我试图向用户显示的位置。

问题

因为谷歌地图 iFrame 在页面加载时加载，而 <div> 被隐藏，这意味着当 <div> 显示时，谷歌地图没有正确对齐（图钉和中心位置现在位于左上角）

我正在寻找的解决方案

我知道有些人可能会告诉我“应该”如何重新编码整个页面。我实际上正在寻找的是某种我可以设置的onClick 函数，该函数将重新加载 iFrame，以便地图正确居中。

须知

这个 iframe 有一个谷歌地图页面作为它的源。即 URL 而不是指向我网站中文件的链接。

任何帮助将不胜感激！我在网上搜索过的很多代码似乎都可以刷新引用的特定文件，而不是外部 URL。

如果我将地图嵌入到另一个 HTML 文件中，然后将该 HTML 文件作为框架源，它会起作用吗？

【问题讨论】：

标签： google-maps iframe

【解决方案1】：

在互联网上搜索了数小时但没有得到任何结果后，我决定尝试我在问题的最后附注中输入的内容，它奏效了！

我只是制作了第二个名为 map.html 的文件，里面的代码字面意思是：

<html>
<iframe> </iframe>   
</html>

显然是 Google Maps 源，然后在我的主页中，我将 iframe 的 src 链接到 pages/map.html 而不是 Google Map 链接。

【讨论】：

【解决方案2】：

我不是专业人士，但我从 body 标记中删除了 onload="initialize()" 并在取消隐藏 div 的按钮中将其更改为 onclick="initialize()"。这似乎现在有效。

【讨论】：

什么正文标签？我在 OP 上没有看到身体标签 - 想澄清一下吗？谢谢。
为我工作。漂亮而简单的 +1

【解决方案3】：

我遇到了类似的问题，通过jquery更改了div的css样式，并更改了我放置google map的iframe的位置。

问题

jquery 代码：

<script type="text/javascript">    
$(function(){  
        $("#map_link").click(function(event) {  
            event.preventDefault();  
            $("#map").slideToggle();
        });  
    });
</script>

HTML：我将链接和谷歌地图 iframe 加载到具有 display:none css 样式的 div 中。因为 display:none 样式使 div 宽度：0 和高度：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改为display:block，所以地图显示得很好。

<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none"></div>

希望这会有所帮助！祝您编码愉快！

【讨论】：

嵌入的谷歌地图在其父级上与display:none 结合使用对我来说也不起作用。当父级变为可见时，使用 JS/jquery 在 div 中加载谷歌地图 iframe 对我有用。谢谢。
你能用实际的 iframe 代码展示示例吗？假设我有多个 iframe iof 谷歌地图显示隐藏 div 中的一个地方。

【解决方案4】：

不要用display:none 隐藏div，而是使用position: absolute; top: -9999px; left: -9999px 之类的东西

然后，当您想要显示该 div 的内容时，将这些属性设置为 position: static; top: auto; left: auto 或类似的东西

【讨论】：

【解决方案5】：

我没有使用 iframe（我使用的是 Google Maps API 的第 3 版），但由于“隐藏”div 而出现了同样的“未正确对齐”问题。我的修复，而不是使用 display: none 将其完全从 DOM 中删除，我使用了可见性和高度，如下所示：

.myMapDiv {
    visibility: hidden;
    height: 0px;
}

我相信正在发生的事情是因为“可见性：隐藏”实际上使 DOM 中的元素保持不动，因此地图能够按预期呈现。我已经在 FF/Chrome/IE 7-9 中对其进行了测试，到目前为止似乎没有问题。

【讨论】：

【解决方案6】：

我遇到了同样的问题，我的解决方案是将 div 和 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】：

<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】：

您可以使用可见性隐藏并使用 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");
  });

【讨论】：

【解决方案9】：

这是一个根本不需要任何编程的解决方案！

获取嵌入代码时，点击“自定义和预览嵌入地图”，然后只需将地图向下和向右拖动，使图钉位于右下角，然后抓取新的嵌入代码。

当地图以隐藏模式居中时，它在展开时仍会正确显示。（我知道并不完美，但如果你真正想要的只是图钉显示在地图上，完全可以）

【讨论】：

【解决方案10】：

在 CSS 中：

#googleMap { visibility: hidden; }

原创

beim Klick der die Karte öffnen soll jQuery:

编辑

点击打开地图时的jQuery：

$('#googleMap')
 .css('display','none')
 .css('visibility','visible')
 .fadeIn(500);
});

【讨论】：

您应该始终用英语发布您的答案。本网站不接受其他语言的答案。从现在开始请牢记这一点。谢谢你:)

【解决方案11】：

有一个同时使用 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');

});

});

【讨论】：

【解决方案12】：

您可以像这样简单地刷新 iframe：

var myIframe = jQuery('#myIframe');
myIframe.attr('src',myIframe.attr('src')+'');

【讨论】：

【解决方案13】：

同样的问题，简单的解决方案。

css hidden 在 html 流中留出一个空格。我不知道屏幕外的 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();
  });
})

【讨论】：

【解决方案14】：

我也一直在为这样的事情而苦苦挣扎。我最初在其中添加了一个类.hidden，即display: none;。但是当我切换.hidden 时，地图没有居中。我发现等到地图完全加载后，在添加 .hidden 类之前使用 idle 事件监听器解决了我所有的显示问题。

google.maps.event.addListenerOnce(map, 'idle', function(){ // do something only the first time the map is loaded $mapContainer.addClass('hidden'); });

参考： How can I check whether Google Maps is fully loaded?

【讨论】：

【解决方案15】：

我遇到了同样的问题。

解决方案

使用iframe 作为外部源有效。

在线演示

http://jsbin.com/nogomi/1

确保iframe 元素的name 属性与a 元素的target 属性相同

灵感来自https://developers.google.com/maps/documentation/javascript/

【讨论】：