嵌入的自定义谷歌地图不会在没有刷新的情况下显示

embeded custom google map wont display without refresh

本文关键字：刷新 情况下 显示 自定义 谷歌地图      更新时间：2023-09-26

我为一个网站构建了两个自定义的谷歌地图，并将它们与iframe嵌入到一个移动网站上：mobile.moodyplumbingpi.com当第一次通过录音服务区查看时，这些地图不显示自定义地图，而是显示南半球的地图。如果我点击刷新，将显示正确的地图。想知道我是否错过了在打开时显示的某种jquery命令或类似的命令。我完全被这件事卡住了。如有任何帮助，我们将不胜感激！Mike以下是显示地图的部分的代码：

BackMoody管道

<article data-role="content">
  <h2>Moody Plumbing Service Area</h2>
  <ul data-role="listview" data-inset="true" data-filter="false">
  <li>
    <h3>Warren Service Areas</h3>
    <iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small><a href="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </li>
    <li>
    <h3>Youngstown Service Areas</h3>
    <iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small><a href="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </li>
    </ul>
</article>


<nav data-role="footer">&copy; <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing <a href="http://moodyplumbingmpi.com/mobile.php" data-role="button" data-icon="star" data-theme="a">Visit Full Site</a>
</nav>

所以您的问题是，包含映射的iFrame是在隐藏时构建的。这混淆了GoogleMapsEngineneneneba API，后者希望视区窗口大小合适且可见。当您从"服务区域"按钮切换iFrame的可见性时，MapsEngine只会在缩放1时以0,0的纬度向下倾斜。

我认为一种解决方案是在按下"服务区域"按钮时动态重新设置iFrame的SRC。更改两个iFrame标记以包含唯一的id:

<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...

然后在HTML文档的HEAD中添加一个简单的脚本；我没有想到，它来自：用jQuery 重新加载iframe

<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
    $('#location1').attr('src', function(i, val) { return val; });
    $('#location2').attr('src', function(i, val) { return val; });
});
</script>

重新加载有点跳跃。因此，其他可能考虑的选项包括：

  • 当按下"服务区域"按钮时，动态触发iFrame的刷新；网上有关于这一点的代码，但它似乎不适用于所有类型的浏览器
  • 放入几个DIV作为占位符，然后使用javascript插入iFrame HTML作为DIV的innerHTML
  • 找到触发地图RESIZE事件的方法[google.maps.event.trigger（？？，"RESIZE"）；]，类似于以下链接中的一个答案；我不知道这是否可能使用MapsEngine：除非刷新，否则谷歌地图无法正确显示

你确实需要确定事件发生的时间。在尝试上述任何操作之前，#locations SECTION需要完全可见，以允许MapsEngine初始化正常工作。在戳iFrame之前，您需要设置一个事件来知道SECTION何时可见（jQuery pageshow事件按照上面的代码示例中提供的方式执行此操作）。

最后，我不确定你是使用谷歌的MyMaps还是使用谷歌地图引擎构建地图。如果你确实使用了MapsEngine，你需要注意的是，谷歌将在2015年底终止maps引擎，这两个地图将变得不可操作。

相关文章：