在同一页面加载两次相同的ACF图 [英] Load Same ACF Map Twice on Same Page

问题描述

我在一个网站上工作： MetroCRE ，并试图使用Google使用高级自定义字段进行地图集成。

现在地图正在运行，但是由于客户的具体需求，他们希望在移动设备的一个位置使用地图，存在于桌面上。

但是，无法在同一页面上加载Google Map字段两次。

在手机上，地图工作，或调整浏览器的大小将使它加载，但在页面加载时，它不会在> = 768px

有人知道有什么方法可以解决这个问题吗？ 因为地图在调整大小后开始工作。 ..

从 ACF网站

a>。

解决隐藏的地图问题

如果初始化为Google地图API，则无法按预期工作一个隐藏的元素。当元素显示时，地图不会显示。当使用弹出窗口模式时，这种情况很可能发生。

为了解决这个问题，只需在map元素可见后触发map变量上的'resize'事件。 / p>

  //弹出窗口，地图不可见
 google.maps.event.trigger（map，'resize' ）; 
  

因此，当您点击一个标签贴图来触发调整大小时，我会添加一个事件。将代码放到最后的acf_google-map.js中

  $（document）.ready（function（）{
 
 $（'。acf-map'）。each（function（）{
 
 //创建地图
 map = new_map（$（this））; 
 
））; 
 
 $（'＃map-tab'）。click（function（）{
 google.maps.event.trigger（map，'resize'）） ; 
}）; 
 
}）; 
  

编辑：

有动画，所以延迟到调整触发大小

  $（'＃map-tab'）。click（function（）{
 setTimeout（function（）{
 google.maps.event.trigger（map，'resize'）; 
}，200）; 
}）; 
  

I am working on a website: MetroCRE and am trying to use the Google Maps integration with Advanced Custom Fields.

Now the map is working, however due to specific client needs, they want it in one location on mobile, and within the tab selection that exists on desktop.

However, it is not possible to load the Google Map field twice on the same page.

On mobile, the map works, or resizing the browser at all will make it load, but on page load it will not at >= 768px

Does anyone know of any way to get past this?

解决方案

Since the map starts working after resize...

From ACF Website.

Solving the hidden map issue

The Google map API will not work as expected if initialized on a hidden element. When the element is show, the map will not display. This scenario is most likely when using a popup modal.

To solve this problem, simply trigger the ‘resize’ event on the map variable after the map element is visible.

// popup is shown and map is not visible
google.maps.event.trigger(map, 'resize');

So I would add an event when you click a tab Map to trigger the resize. Put the code into acf_google-map.js at the end

$(document).ready(function(){

    $('.acf-map').each(function(){

        // create map
        map = new_map( $(this) );

    });

    $('#map-tab').click(function () {
        google.maps.event.trigger(map, 'resize');
    });

});

EDIT:

Because tabs fade in there's animation so put a delay into resize trigger

$('#map-tab').click(function () {
    setTimeout(function() {
        google.maps.event.trigger(map, 'resize');
    }, 200);
});

这篇关于在同一页面加载两次相同的ACF图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！