谷歌地圖使用.hide和.show交換地圖時會中斷

Question

我想讓用戶點擊兩個不同的地址來顯示兩個不同的谷歌地圖。地址被包圍在<a>標籤中。

<a href="#" id="display_bush_map"><br> 
    5123 Bush River Rd.<br> 
    Columbia SC 29212</a> 

和

<a href="#" id="display_wappoo_map" <br> 
    1023 Wappoo Road Suite A7<br> 
    Charleston, SC 29407</a> 

我同時加載兩個谷歌地圖，然後使用jQuery的$(document).ready() function隱藏其中的一個頁面加載後。

這裏是整個腳本：

<script> 
$(document).ready(function(){ 

    //set the default map to Bush River Rd 
    //hide the Wappoo Road map on page load 
    $("#wappoo_road").hide(); 

    //clicking Bush River address makes Bush River map display 
    $("#display_bush_map").click(function() { 
     $("#bush_river").show(); 
     $("#wappoo_road").hide(); 
     return false; // so link click doesn't reload page 
    }); 

    $("#display_wappoo_map").click(function() { 
     $("#wappoo_road").show(); 
     $("#bush_river").hide(); 
     return false; 
    }); 
});</script> 

以及相應的映射（不映射代碼以節省空間）。

<div id="bush_river" class="google_maps"><iframe src="mapcode1" width="1366" height="318" frameborder="0" style="border:0"></iframe></div> 
<div id="wappoo_road" class="google_maps"><iframe src="mapcode2" width="1366" height="318" frameborder="0" style="border:0"></iframe></div> 

如果我嘗試使用<a>標籤調用.show()和.hide()我的第二張圖顯示爲一個破碎的地圖的地圖之間切換。但只有在初始頁面加載後隱藏地圖。

如果我最初沒有隱藏第二張地圖，那麼一切正常，除非兩張地圖最初都能看到 - 這不是我想要的。

下面是我三重檢查地圖代碼，我有問題的頁面與

http://tpmchosting.com/dev/cbe/contact.php

，它不是用iframe的內容存在問題。我很難確定它可以是什麼。

Answer 1

您必須在隱藏後要顯示的地圖上觸發調整大小。