谷歌地图使用.hide和.show交换地图时会中断

我想让用户点击两个不同的地址来显示两个不同的谷歌地图。地址被包围在<a>标签中。谷歌地图使用.hide和.show交换地图时会中断

<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的内容存在问题。我很难确定它可以是什么。

来源

2014-04-01 EmbraceCode

这是一个答案，它可能是有用的http://stackoverflow.com/questions/3360494/keep-a-google-maps-v3-map-hidden-show-when-needed – Mahmoud