Googlemap iframe not looking good in a display:none DIV and hide/show via javascript

Question

I'm trying to add a google map to my website. It works like a charm if I keep the map always visible. The issue is that I want to hide/show it when users click on a button. In order to do that I created a div called #googlemap with display:none, then a few JS lines makes the DIV visible when I click on a button. The issue is that for some reason the map does not look OK at all with this solution (see pictures, looks like the address is not taken into consideration with the hide/show solution). I created a JSFiddle for this http://jsfiddle.net/PwyLF/ Thanks for your help

Not OK:

OK (if I remove display:none)

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

is this what you are looking for? http://jsfiddle.net/cancerian73/T7jLf/20/

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