javascript - 当 jQuery 事件运行时，如何触发谷歌地图调整大小？

Question

我正在使用 Map List Pro 插件为网站创建一个商店定位器，该插件显示在使用 Popup Maker 插件创建的弹出窗口内。

正在进行中的版本:https://beastsofbalance.com/pop-test-page/ - 单击“商店定位器”链接将其打开

打开弹出窗口后，不会加载 Google map 。

Map List Pro 插件的文档表明这是因为它最初在页面加载时隐藏:http://www.maplistpro.com/documentation/only-part-of-the-map-shows-the-rest-is-grey/

它提供了两个代码片段来解决问题，但表示弹出插件将有一个自定义事件，我需要将其添加到其中。

这两个片段是:google.maps.event.trigger(MapListProMaps[0].map, "resize"); - 对于单个 map

$(document).trigger({type: "resizeMap"}); - 适用于所有 map

Popup Maker 插件的文档表示事件 pumAfterOpen 在弹出窗口打开后立即运行: http://docs.wppopupmaker.com/article/42-popup-maker-jquery-api

我没有足够的(任何!)jQuery/javascript 知识来将这两部分信息放在一起来创建一个工作代码片段，该代码片段将在打开弹出窗口时触发 map 的重新加载，而我是非常希望有人能够帮助我!

非常感谢

汉娜

Answer 1

我已在您的网页副本上尝试了以下操作:

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery(document).on('pumAfterOpen',function(e){
        jQuery(document).trigger({type: "resizeMap"});
    });
});

由于 Google API 的授权问题，我看不到 map 大小的调整，但这应该足以让您走上正轨。