Support

Account

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