Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
When you hide a Flexible Map in a tab or accordion, and then click on the tab to reveal its contents, the map doesn't know how big to draw until it is revealed. You need to give Google Maps a nudge so that it will pick up the correct size and position when you reveal it.
Plugin Name: Flxmap jQuery UI Activate
Plugin URI:
Description: Fix maps in jQuery UI hidden accordion and tab panels
Version: 2
Author: WebAware
Author URI:
* make sure jQuery is loaded
add_action('wp_enqueue_scripts', function() {
* add our script to the footer
add_action('wp_footer', function() {
(function($) {
function mapRedraw(event, ui) {
if (ui.newPanel.length) {
$("#" + ui.newPanel[0].id + " div.flxmap-container").each(function() {
var flxmap = window[this.getAttribute("data-flxmap")];
$("body").on("accordionactivate", mapRedraw).on("tabsactivate", mapRedraw);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment