嵌入自定义 google 地图不刷新将不会显示

Question

我为网站构建了 2 个自定义 google 地图，并在移动网站上使用 iframe 嵌入它们：mobile.moodyplumbingmpi.com 这些地图不显示自定义地图，而是显示南半球地图首先通过录音服务区查看。如果我点击刷新，就会显示正确的地图。想知道我是否缺少在打开时显示的某种 jquery 命令或类似的命令。我完全坚持这一点。任何帮助将不胜感激！麦克风以下是显示地图部分的代码：

回去Moody Plumbing

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

Answer 1

所以您的问题是包含地图的 iFrame 是在隐藏的情况下构建的。这让 Google MapsEngine API 感到困惑，它希望视口 window 的大小合适且可见。当您从 "Service Areas" 按钮切换 iFrame 的可见性时，MapsEngine 会在 lat/lng 0,0.

处以缩放 1 的速度向下移动。

我认为一种解决方案是在按下 "Service Areas" 按钮时动态重新设置 iFrame 的 SRC。更改两个 iFrame 标记以包含唯一 ID：

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

然后在HTML文档的HEAD中添加一个简单的脚本；没想到这个，来自：Reload an iframe with jQuery

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

重新加载有点紧张。因此，其他可能的选择包括：

按下 "Service Areas" 按钮时动态触发 iFrame 的刷新；网上有这方面的代码，但它似乎并不适用于所有类型的浏览器。
放入几个 DIV 作为占位符，然后使用 javascript 插入 iFrame HTML 作为 DIV 的内部 HTML。
找到一种方法来触发地图 RESIZE 事件 [google.maps.event.trigger(???, "resize");] 类似于以下答案之一 link;我不知道使用 MapsEngine 是否可行：google maps not displayed correctly unless refreshing

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

最后，我不确定您是使用 Google 的 MyMaps 还是使用 Google MapsEngine 构建地图。如果你确实使用过MapsEngine，需要注意的是Google将于2015年底终止MapsEngine，这两张地图将无法使用。

嵌入自定义 google 地图不刷新将不会显示

embeded custom google map wont display without refresh

javascript

embed

mobile

google-maps

jquery-mobile