谷歌地图iframe没有显示丢弃的针脚居中

Question

我想在我的网站上添加两张地图,每张地图都有两个引脚.用户可以通过单击选项卡在两个地图之间切换.我使用Google Maps Engine构建了两张地图.第一张地图看起来很棒,放大到合适的数量并显示两个引脚.但是,第二张地图完全没了.我试着做上一个问题中的建议Marker没有居中在谷歌地图的iframe但是1)它仍然关闭2)我无法在地图上添加第二个图钉(加上地图看起来不像iframe我直接嵌入到网站上).

这是JsFiddle:http://jsfiddle.net/SbH3Y/5/

谷歌地图iframe:

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

谢谢

Answer 1

选中后,您需要在第二个标签中重新加载iframe.最好的是当你最初有一个空的iframe并src在第一次设置选项卡时设置.

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

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

http://jsfiddle.net/doktormolle/jUVuB/

但是每次选择标签时都会重新加载iframe.
更好的方法:

iframe:

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

如您所见,最初将不会加载地图,它src是空白的,地图的URL存储在data-src-attribute中

剧本:

  $('#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);
      } });

http://jsfiddle.net/doktormolle/tWCUR/