Skip to content

Instantly share code, notes, and snippets.

Embed
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.
<?php
/*
Plugin Name: Flxmap jQuery UI Activate
Plugin URI: https://gist.github.com/webaware/05b27e3a99ccb00200f5
Description: Fix maps in jQuery UI hidden accordion and tab panels
Version: 2
Author: WebAware
Author URI: http://www.webaware.com.au/
*/
/**
* make sure jQuery is loaded
*/
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('jquery');
});
/**
* add our script to the footer
*/
add_action('wp_footer', function() {
?>
<script>
(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")];
flxmap.redrawOnce();
});
}
}
$("body").on("accordionactivate", mapRedraw).on("tabsactivate", mapRedraw);
})(jQuery);
</script>
<?php
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.