Question

我正在尝试向我的网站添加两张地图，每张地图都有两个引脚。用户可以通过单击选项卡在两个地图之间切换。我使用Google Maps Engine构建了两张地图。第一张地图看起来很棒，放大到合适的数量并显示两个引脚。但是，第二张地图完全没了。我试着做上一个问题Marker not centering in iframe for google map中的建议但是1）它仍然关闭2）我无法在地图上添加第二个引脚（加上地图看起来不像我嵌入的iframe一样好直接到网站上。）

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

Google Maps 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为空，地图的网址存储在data-src - 属性

中

脚本：

  $('#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/

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

1 个答案: