隐藏div中的Google地图

我正在使用其中一个collapsing div来将Google地图隐藏在我的网页中。但是，当我触发事件来扩大div并显示谷歌地图时，它不会出现。而这个问题只有在IE浏览器中，所有其他浏览器才能正常工作。我发现有同一个问题，回应后添加此代码：隐藏div中的Google地图

google.maps.event.trigger（map，'resize'）;

但是我应该把它放在哪里？我放入了一个Javascript函数，当div崩溃时它会被调用，但它不起作用。我应该用我的地图名称替换“地图”吗？我从谷歌网站获得了谷歌地图的代码作为“iframe”标记，我只是将其粘贴到我的网页... 请解释。

2012-03-13 Darius

你怎么真的触发事件？你用什么代码来揭示div？我们需要看看你在做什么，所以我们可以帮助你做到正确。你有链接到测试网站吗？ – 2012-03-13 09:19:56

google.maps.event.trigger(map, 'resize');

适用于您使用Maps API的情况。从而地图是对地图对象的引用。

但是你没有使用API。您正在使用Google地图的iframe。

谷歌地图不喜欢被隐藏的div。我相信的解决方案是让iframe表示1x1像素。然后调整div的大小以使其足够大 - 并且可见。

另一种方法是给iframe一个src =“about：blank”。然后在显示div之后，动态地将src设置为正确的url。通过这种方式，当div可见时，地图被加载。（这可能更好，因为你不会导致用户加载iframe的东西，即使他们不打开地图）

2012-03-13 23:10:46 barryhunter

我知道它与API一起工作 - 谢谢！ – Darius 2012-03-14 00:30:55

因为在你的问题中，你说你没有使用Google Maps API，你可以执行以下操作：

裹地图：

<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>

使用此代码（jQuery的版本）时，会显示在地图：

$('#map-wrapper').html($('#map-wrapper').html());

的JavaScript版本：

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

当地图显示时，包装器（谷歌地图iframe）的内容将被重新生成，因此重新加载。

2014-12-24 18:08:30 Gustavo

回答