Google maps Google Maps iframe未显示居中放置的管脚

我正在尝试添加两个地图到我的网站，每个都有两个插针。用户可以通过单击选项卡在两个地图之间切换。我使用谷歌地图引擎构建了这两张地图。第一张地图看起来很棒，放大到合适的大小并显示了两个大头针。然而，第二张地图是完全关闭的。我试着按照上一个问题中的建议做，但1）它仍然关闭，2）我无法在地图上添加第二个pin（另外，地图看起来没有我直接嵌入到网站上的iframe好看）

以下是JSFIDLE：

谷歌地图iframes：

<iframe src="http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs" width="461" height="350" scrolling='no'  marginheight='0' marginwidth='0'></iframe>

---

谢谢

当iframe被选中时，您需要在第二个选项卡中重新加载它。最好是当您最初有一个空的iframe，并在第一次选择选项卡时设置

src

简单地重新加载框架将很容易：

  $('#pickup-date2').show(0,function(){         
    $('iframe',this)
      .attr('src','http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs');
  });

但这将在每次选择选项卡时重新加载iframe。
更好的方法：

iframe：

<iframe src="about:blank" 
        data-src="http://mapsengine.google.com/map/embed?mid=zzFoZgN4yc_E.kT_V1HoEUMHs" 
        width="461" height="350"></iframe>

---

这真是太棒了，它工作得非常出色，而且你的小提琴使它很容易实现。谢谢，答案是救命。谢谢。经过两天的努力，这个答案救了我。我不得不稍微修改一下，使它符合我的具体设计和要求，但这确实救了我。提醒一下，当我使用Magento时-最好在使用Magento时安装jquery模块，您不会使用$-您可能会使用jquery。例如jQuery（document）.ready（函数（）{}

  $('#pickup-date2')
   .show(0,function(){
      //when the iframe has data-src
      if($('iframe',this).data('src')){
        $('iframe',this)
          //set the src-attribute
          .attr('src',$('iframe',this).data('src'))
            //and set data-src to null,
            //so the iframe will only be reloaded on the first click
            .data('src',null);
      } });