Google地图iframe未显示放置的针脚居中 [英] Google Maps iframe not showing dropped pins centered

问题描述

我试图在我的网站上添加两张地图，每张地图都有两个放置引脚。用户可以通过单击选项卡在两个地图之间切换。我使用Google Maps Engine构建了这两个地图。第一张地图看起来很棒，放大到合适的数量并显示两个引脚。但是，第二张地图是完全关闭的。我尝试了解上一个问题中提出的建议，标记不集中在iframe中谷歌地图，但1）它仍然关闭，2）我无法添加第二个针到地图（加上地图看起来不像我直接嵌入到网站的iframe）。 p>

以下是JsFiddle： http://jsfiddle.net / SbH3Y / 5 /

Google地图iframe：

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

谢谢

解决方案 div>

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

$ b

  $（'＃pickup -date2'）。show（0， function（）{
 $（'iframe'，this）
 .attr（'src'，'http：//mapsengine.google.com/map/embed？mid = zzFoZgN4yc_E.kT_V1HoEUMH'）; 
}）; 
  

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

但是这会在每次你重新加载iframe选择标签。

更好的方法：

iframe：

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

当您看到地图最初不会被加载时， src 是空白的，映射的URL存储在 data-src -attribute

脚本：

  $（'＃pickup -date2'）
 .show（0，function（）{
 //当iframe具有data-src 
 if（$（'iframe'，this）.data（'src'））{
 $（'iframe'，this）
设置src属性
 .attr（'src'，$（'iframe'，this）.data（'src'））
 //将data-src设置为null，
 //所以iframe只会在第一次点击时重新加载$ ​​b $ b .data（'src'，null）; 
}}）; 
  

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

I am trying to add two maps to my website, each with two drop pins. Users can switch between the two maps by clicking on tabs. I built the two maps using the Google Maps Engine. The first map appears great, zoomed in to the right amount and showing the two pins. However, the second map is totally off. I tried doing what was suggested in this previous question Marker not centering in iframe for google map but 1) it was still off and 2) I was unable to add a second pin to the map (plus the map did not look as nice as the iframe I embedded directly on to the site).

Here is the JsFiddle: http://jsfiddle.net/SbH3Y/5/

Google Maps 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>

Thanks

解决方案

You need to reload the iframe in the 2nd tab when it gets selected. The best would be when you initially have an empty iframe and set the src at the first time the tab will be selected.

simple reloading of the frame would be easy:

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

But this would reload the iframe each time you select the tab.
Better approach:

the iframe:

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

As you see the map initially will not be loaded, the src is blank and the URL of the map is stored in the data-src-attribute

the script:

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

这篇关于Google地图iframe未显示放置的针脚居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！