CODEWITHSUNDEEP
phpwordpressgoogle-mapsadvanced-custom-fields
Ishio
Ishio

Reputation: 765

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?

Upvotes: 2

Views: 819

Answers (2)

TheDrot
TheDrot

Reputation: 4337

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

Upvotes: 2

Ishio
Ishio

Reputation: 765

While not the best way to go about it, I found the solution to my issue here.

Turns out adding some CSS to render both tabs but put them off the page will cause it to work as google.maps.event.trigger(map, 'resize'); will not work on tab activation.

Below is the CSS I used to get it to work. Works well for responsive.

.tab-pane { display: block !important; position: fixed; right: -9999px; width: 100%; }
.tab-pane.active { position: relative; left: 0; }

If anyone has a non-CSS solution, please, let me know as the above answer by TheDrot didn't work for me.

Upvotes: 1

Related Questions