用谷歌地圖顯示隱藏div - （隱藏開始）

在此先感謝，如果你可以提供幫助。用谷歌地圖顯示隱藏div - （隱藏開始）

我試圖通過點擊'顯示地圖'鏈接（然後將更改爲'隱藏地圖'）並簡單地隱藏和顯示div，並且理想情況下會使用幻燈片向上/向下效果來設置動畫效果）只需使用谷歌的基本「分享地圖」選項，嵌入一個嵌入爲iframe的谷歌地圖。

當然，我遇到了幾次這裏討論過的困難，因爲地圖最初是隱藏的，因此地圖不能正確繪製。

我明白，但作爲一個無用的編碼器，只能真正複製和粘貼的東西，不能解決如何實現這裏提出的各種修補程序。

我得到這個意義上，如果我開始用DIV隱藏的，它只是沒有去上班 - 我有點想這樣的：

http://jsfiddle.net/ cancerian73/T7jLf/20/

而是用DIV隱藏開始。

我一直在這裏閱讀關於定位10000像素到左側的修復，但不知道如何將div恢復到正常頁面流 - 然後將其反轉以再次隱藏！

任何人都可以在這裏用我能理解的例子來幫忙嗎？或者我只是要求一些基本的東西？

如果我能看到所有涉及的代碼，這將是非常好的，這樣我就可以有效地複製/粘貼它！

許多在此先感謝....

來源

2014-03-29 user3476598

如果你給的地圖隱藏溢出容器和它的iframe定位絕對不可能的網站，它可以在後臺渲染，你可以使用CSS轉換到展示下。

看我爲參考plunker，http://plnkr.co/edit/HcOLBwka1KbO1M8Aa9tR?p=preview

.map { 
    width: 425px; 
    height: 350px; 
    overflow: hidden; 
    position: relative; 
} 

.map iframe { 
    position: absolute; 
    top: -350px; 
    transition: top 1s ease; 
    -webkit-transition: top 1s ease; 
    -moz-transition: top 1s ease; 
    -o-transition: top 1s ease; 
} 

.map.expanded iframe { 
    top: 0px; 
}

然後只需使用jQuery來切換容器類：

$(document).ready(function() { 
    $('.btn-open-map').click(function() { 
    $('.map').toggleClass('expanded'); 
    }); 
});

來源

2014-03-29 20:36:39

金寶嗨，由於某種原因，我只是剛剛看到你的答案 - 沒有收到電子郵件通知（或者可能是垃圾郵件）。非常感謝您的時間 - 我今天晚些時候會實施一下。再次感謝。 – user3476598

沒問題，希望它適合你。讓我知道事情的後續。 –

嗨，Jimbo。是的，我得到了那個工作，所以非常感謝你。我想在理想情況下，我寧願不要在地圖顯示/隱藏的頁面流中留下空間，但在提問時我沒有指定。我認爲'overflow：hidden'css可能會消除高度，但看起來我錯了。但無論如何，非常感謝您的幫助！（儘管還有一件事，如果你想回答 - 也就是說，我會如何將按鈕換成簡單的文本鏈接？）週末愉快！ – user3476598

用谷歌地圖顯示隱藏div - （隱藏開始）

回答

相關問題