Google地图在加载时的位置不正确

Question

我遇到了iframed Google地图的问题。基本上，这个位置是不正确的，但并非总是如此。我认为这个问题可能与地图处于隐藏的div中有关，后者会显示该div。

任何人都可以验证这确实是一个问题，或提出一个解决方案呢？我对地图没有太多的控制，因为它是从别的地方来的。

我试着给iframe一个ID，然后我在google.maps.event.trigger(map, "resize");的目标上显示父容器的函数，但无济于事。

编辑
按照要求，这里的地图：

<iframe width="450" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=56.084298,11.074219&amp;z=6&amp;output=embed"></iframe> 

正如你所看到的，有没什么特别的地方。它应该显示丹麦，但它有时会显示德国和波兰。我相信这些都是很好的地方，但客户很少使用它。

Answer 1

我也可以证实这个问题。我不认为它与你的隐藏div有关，因为我也有固定元素的问题。

问题在于，您希望地图居中的地方因某种原因最终位于iframe的左上角。我认为这是因为在谷歌方面，地图大小调整事件在知道iFrame的完整大小之前发射得太早。

试试这个，到目前为止，它为我的作品：

1. 删除IFRAME SRC标签。

2. 嵌入的JavaScript代码下面的iframe以下地方：

   <script type='text/javascript'> 
       jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc...."); 
   </script> 
   

因为它加载的iframe后的地图是存在的。如果将来我仍然遇到问题，我会尝试在上面的代码中添加一个简短的延迟，使其在文档加载后运行。

Answer 2

“resize”事件将地图对象作为参数，而不是id。由于您在iframe中使用maps.google.com，因此我不相信可以访问实际的地图对象。

不幸的是，我认为最好的答案是切换到使用Google Maps v3 API的简单实现，而不是在iframe中嵌入maps.google.com。这将允许您在需要时正确触发“调整大小”，因为您可以访问地图对象。

这里的文档：http://code.google.com/apis/maps/documentation/javascript/tutorial.html

建立一个简单的实现这样的例子：http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

然后留下您的来电google.maps.event.trigger（地图， “调整”）;当你显示隐藏的容器时。

Answer 3

可以确认我在“选项卡式”div中显示两个地图时遇到过这个问题。即一个div加载隐藏。

我发现问题最简单的方法就是在复制和粘贴嵌入代码之前使用一些试验和错误并补偿地图，以补偿错误的地图偏移量。但只要记住将外部链接（外部链接的谷歌地图）作为原始的href，否则这张地图也会被抵消。

Answer 4

简单的解决方案：

1. 把IFRAME用id = “地图” 一个div内部。
2. 不要隐藏div，因为地图会产生错误。

3. 将div绝对定位，左侧为10.000像素。在这种情况下，地图不会显示在屏幕上，但会被加载。 jQuery（'＃map'）。css（{“position”：“absolute”，“left”：“ - 10000px”}）;}};

4. 当您单击按钮来显示地图地址：

   jQuery('#map').show(); jQuery('#map').css({"position":"static"}); 
   

5. 要隐藏的div地址：

   的jQuery（ '＃图'），隐藏（）;

Answer 5

我建议加载地图有一段时间延迟后检查div是否可见或哪些是要保存地图。为我工作

$(document).ready(function() { 
     $('.togglebtn').click(function() { 

if(!$('#map_canvas').is(':visible')){ 
       setTimeout(function(){initialize()}, 500); 
       } 
    }); 
}); 


    //your function 
function initialize() { 


     var mapOptions = { 
      zoom: 3, 
      center : new google.map.LatLng(31.510474,80.352287), 
      center: new google.maps.LatLng(44.510474, 50.352287), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     var contentSC_PAK = "SoftCircles Pakistan"; 
     ..... 
     ..... 

     and rest of your map code to initialize map 



     }); 

    } 

Answer 6

我建议加载地图有一段时间后，检查div是否可见或哪些是要保存地图。试一试 ！

$(document).ready(function() { 
     $('.togglebtn').click(function() { 

if(!$('#map_canvas').is(':visible')){ 
       setTimeout(function(){initialize()}, 500); 
       } 
    }); 
}); 


    //your function 
function initialize() { 


     var mapOptions = { 
      zoom: 3, 
      center : new google.map.LatLng(31.510474,80.352287), 
      center: new google.maps.LatLng(44.510474, 50.352287), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     var contentSC_PAK = "SoftCircles Pakistan"; 
     ..... 
     ..... 

     and rest of your map code to initialize map 



     }); 

    } 

Answer 7

这其中并没有为我工作：

jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc...."); 

...所以我必须找到另一种方式来解决这个问题。

我的问题是，我有一个<div>这是display: none，并成为可见这样2.5秒这样的后：

setTimeout(function() { 
    $("#contents") 
    .css({opacity: 0}).fadeIn() 
    .animate({opacity:1}, 1000, function() { 
    }); 
}, 2500); 

而且我想在#contents要显示的谷歌地图，并我遇到了同样的问题，红色标记在左上角。

因此，我在页面中添加了一个<div id="map"></div>。

然后，我添加iframe的东西在叫map.php一个PHP文件，我在下面这个jQuery线：

setTimeout(function() { 
    $("#map").load('map.php'); 
}, 2500); 

因此，它装载了iframe中map.php到DIV与map ID。它工作完美。