Question

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

正在使用的版本：https://beastsofbalance.com/pop-test-page/ - 点击“商店定位器”链接将其打开

打开弹出窗口时，Google地图无法加载。

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"); - 针对单个地图

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

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

我没有足够的（任何！）jQuery / javascript知识将这两部分信息放在一起创建一个工作代码片段，当弹出窗口打开时会触发地图重新加载，而我是非常希望有人可以帮助我！

非常感谢

汉娜

Answer 1

我在您的网页副本上尝试了以下内容：

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

由于Google API的授权问题，我无法看到地图调整大小，但它应该足以让您走上正确的轨道。

如何在jQuery事件运行时触发google map调整大小？

1 个答案: