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: to generate a map. I grouped more than one using tabs (which uses jQuery UI’s tabs) and initiated it like so:

        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 =,"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.