Google maps 加载时谷歌地图位置不正确

我对iframed谷歌地图有问题。基本上，这一立场是错误的，但并非总是如此。我认为问题可能与地图位于隐藏的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>



正如你所看到的，它没有什么特别之处。它本应该展示丹麦，但有时会展示德国和波兰。我确信这些地方不错，但客户端几乎看不到它的用处。
调整大小事件将地图对象作为参数，而不是id。因为您在iframe中使用的是maps.google.com，所以我认为不可能访问实际的地图对象

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

以下是文档：

设置如下示例所示的简单实现：

然后将您的呼叫留给google.maps.event.trigger（map，“resize”）；当您显示隐藏的容器时。
我也可以确认此问题。我不认为这与你的隐藏div有关，因为我也有固定元素的问题

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

试试这个，到目前为止它对我有效：

删除iframe src标记

将下面的javascript代码嵌入iframe下面的某个位置：

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


jQuery（“iframe#headerMap”）.attr（“src”，”http://maps.google.com/maps/ms?etc 等等……）；

因为它在iframe出现之后加载贴图。如果我以后仍有问题，我将尝试在上述代码中添加一个短暂的延迟，使其在文档加载后运行。
可以确认我在“选项卡式”div中显示两个地图时遇到过此问题。也就是说，一个div加载隐藏

我发现解决这个问题的最简单的方法就是在复制和粘贴嵌入代码之前，简单地使用一点试错和偏移贴图，以补偿错误的贴图偏移。但请记住将外部链接（外部谷歌地图下方的链接）保留为原始href，否则此地图也将被偏移。
简单解决方案：

将iframe放在id=“map”的div中
不要隐藏div，因为映射将生成错误
将div绝对值置于左侧10.000像素处。在这种情况下，地图不会显示在屏幕上，但会被加载

css（{“位置”：“绝对”，“左”：“-10000px”}）

单击按钮以显示地图添加时：

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


要隐藏div add，请执行以下操作：

jQuery（'#map'）.hide（）

我建议在检查div是否可见后，加载map并延迟一段时间，这将保留map。为我工作

  $(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



        });

    }

我建议在检查div是否可见后，加载map并延迟一段时间，这将保留map。试试看

  $(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



        });

    }

这一个对我不起作用：

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

…所以我必须找到另一种方法来解决这个问题

我的问题是，我有一个
，它是
显示：none
，并且在2,5秒后以这种方式变得可见，如下所示：

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

我想让谷歌地图显示在“目录”中，但我遇到了同样的问题，红色标记在左上角

因此，我在页面中添加了一个

然后我在一个名为
map.php
的php文件中添加了iframe内容，并在下面添加了jquery行：

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

因此，它将带有iframe的map.php加载到带有
map
id的div中。它工作得非常好。
这是很久以前的事了，但我最终做了类似的事情。我在显示容器的触发器事件上附加了带有jQuery的映射。太好了！这解决了我的问题。为了不在js文件中硬编码src属性，我喜欢将它保存在数据src属性的iframe中，并使用
iframe.attr（'src'，iframe.data（'src'））加载它。
类似于@LasseDahlEbert所说的，您也可以像平常一样保留src，然后将其重置为自身<代码>$（“iframe”）.attr（“src”），$（“iframe”）.attr（“src”）