在按钮点击事件中使用javascript更改谷歌地图iframe-src属性

Question

我有一个联系人页面，上面有10个不同的地址，中间有一个谷歌地图iframe，我想让地址可以点击，当你点击特定地址时，地图的内容会改变并指向点击的地址。

我是一个jquery新手，我不知道该怎么做。

目前，我一直坚持这一点，但它不起作用：

HTML:

这是默认情况下使用id"map"加载的地图。

<iframe id="map" width="650" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=23,+Quai+des+Bergues&amp;aq=&amp;sll=46.198392,6.142296&amp;sspn=0.084955,0.222988&amp;ie=UTF8&amp;hq=&amp;hnear=Quai+des+Bergues+23,+Grottes+-+Saint-Gervais,+1201+Gen%C3%A8ve,+Svizzera&amp;t=m&amp;z=14&amp;ll=46.206419,6.145108&amp;output=embed&amp;iwloc=near"></iframe>

这是id为"changesrc"的按钮。

<input type="submit" name="changesrc" id="changesrc" value="Another Adress" />

Javascript：

<script type="text/javascript">
        $('#changesrc').click(function() {
        $('#map').attr('src','http://maps.google.it/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=roma&amp;aq=&amp;sll=41.811729,12.738513&amp;sspn=2.927223,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Roma,+Lazio&amp;t=m&amp;z=11&amp;iwloc=A&amp;output=embed');
        });
    </script>

有什么建议吗？非常感谢您的帮助。谢谢

---

我现在能够让它正常工作了！我把输入设置为看起来像正常链接，所以现在一切都好了，但我有一个问题：

当我点击更改地图时，显示的新地图没有"居中"于引脚所在的位置，它被错误地移动了（引脚和中心位置现在在左上角）。

我认为这是因为"显示：无"造成了这个问题。有办法解决吗？

提前感谢

Answer 1

#changesrc是否存在不止一次？然后应该使用class属性而不是id，因为与后者不同，前者可以存在多次。

由于浏览器的安全规则（跨域访问），您无法访问src属性。这适用于所有JavaScript，而不仅仅适用于jQuery和谷歌地图。

但是您可以将所有地图包装在<div>标记并按需显示。当然，所有的地图（除了可能的默认地图）都应该首先通过CSS隐藏。

你可以在这里看到所有的行动：http://jsfiddle.net/FDKHee/pYX6Y/7
（CSS在右上角）