javascript - Googlemap iframe 在显示中不好看 :none DIV and hide/show via javascript

Question

我正在尝试将谷歌地图添加到我的网站。如果我让 map 始终可见，它就像一个魅力。问题是我想在用户单击按钮时隐藏/显示它。为了做到这一点，我创建了一个名为 #googlemap 的 div，带有 display:none，然后当我单击按钮时，几行 JS 代码使 DIV 可见。问题是由于某种原因，使用此解决方案 map 看起来根本不正常(参见图片，隐藏/显示解决方案似乎未考虑地址)。我为此创建了一个 JSFiddle http://jsfiddle.net/PwyLF/感谢您的帮助

不正常:

好的(如果我删除显示:无)

CSS

.block {
    width: 100%;
    height:200px;
    background: red;
}

#googlemap {
    width: 800px;
    height:600px;
    display: none;
}

HTML

<div class="block"><a href="#" id='link'>Click here to show map</a></div>

<div id="googlemap">
     <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2624.9983685732213!2d2.29432085!3d48.85824149999999!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sgoogle+map+paris+eiffel+tower!5e0!3m2!1sfr!2sbe!4v1387990714927" width="800" height="600" frameborder="0" style="border:0"></iframe>
    </div>

JS

$('html').click(function() {
    $('#googlemap').hide();
 })

 $('.block').click(function(e){
     e.stopPropagation();
 });

$('#link').click(function(e) {
 $('#googlemap').toggle();
 window.scrollTo(0, document.body.scrollHeight);
 });

Answer 1

这是您要找的吗？ <强> http://jsfiddle.net/cancerian73/T7jLf/20/

$(".button").on("click", function () {
$("#googlemap").slideToggle("slow");
$(this).text($(this).text() == "Hide map" ? "Show map" : "Hide map");
 });