Googlemap iframe的显示效果不佳：没有DIV并通过JavaScript隐藏/显示

Question

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

不好：

确定（如果我删除显示：无）

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");
 });