Ishio Ishio - 5 months ago 65
PHP Question

Load Same ACF Map Twice on Same Page

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?

Answer

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);
});