Home › Forums › Bug Reports › Google Maps Field doesn’t work in Tabs › Reply To: Google Maps Field doesn’t work in Tabs
I figured out my issue, in case this helps anyone. I used the sample code found here: http://www.advancedcustomfields.com/resources/google-map/ to generate a map. I grouped more than one using tabs (which uses jQuery UI’s tabs) and initiated it like so:
$('.acf-map').each(function(){
render_map( $(this) );
});
That left me with a map in each tab. The problem was, the hidden maps (in inactive tabs) didn’t fully render (only the top left block would be showing). There is likely a better way to do this, but I stored the javascript map variable so I could use it again, then listened for tab clicks so I could redraw the map like so:
$( ".my-tabs" ).on( "tabsactivate", function( event, ui ) {
var map = jQuery.data(document.body,"map");
//resize the map
google.maps.event.trigger(map, 'resize');
//center the map
center_map( map );
});
This worked for me. I realize this isn’t an ACF “problem”, but it might be helpful to users to have it in the docs just in case they run into it.
Cheers!
Jay
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.