The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Comprehensive Google Map Plugin
Google Comprehensive Maps in jQuery Tabs (8 posts)

  1. rafikipress
    Posted 4 years ago #


    It is well documented that there is a problem displaying Google Maps in jQuery tabs. It is not limited to GCM or any specific jQuery tab plugin.

    Here is one of the references :

    jQuery UI Tabs Demo

    And a short extract explaining the problem:

    "Any component that requires some dimensional computation for its initialization won't work in a hidden tab, because the tab panel itself is hidden via
    display: none"

    And they suggest two workarounds :

    1) Use the off-left technique for hiding inactive tab panels.
    2) For Google maps you can also resize the map once the tab is displayed.

    I wonder if the second technique will work with this plugin and if the author and others could possibly give specific instructions on how to achieve this within the plugin (ie which files to edit and exactly which lines to change or add) for a novice?

    I also wonder if it could not be incorporated in the next release of the plugin as using maps in a tab must be a common use, saving a lot of screen real estate ?

    As I said, this problem has been reported many times but no real, definitive solution has been suggested specifically for this plugin.

    Many thanx,







  2. lenamtl
    Posted 4 years ago #

    I hope this will be fixed soon I need this plugin to work with any jquery plugins.

    The css fix work ok with WP UI (paste code in custom css field) but I'm trying to use it with a more basic plugin Collapse-O-Matic and I can't figure out what to change in the CSS.

  3. leoloso
    Posted 3 years ago #

    Hi, I found a solution, unluckily you must hack CGMP code but at least it works
    1. Wrap all the content of file cgmp.function.js under a function, and then call it at the end:

    function my_cgmp() {
    	(function () {
    		if (typeof jQuery === "undefined" || jQuery == null ) {
    			var done = false;

    2. Call this function when the tab with the map is shown (example using Bootstrap):

    function cgmp_reset_map() {
    	jQuery(document).ready(function($) {
    		$('#myTab a[data-toggle="tab"]').on('shown', function (e) {
    			if (e.target.hash == '#contact-map') {
  4. FranceImage
    Posted 3 years ago #


    there may be a simpler solution

    have a look here: https://code.google.com/p/wordpress-geo-mashup/issues/detail?id=333

  5. leoloso
    Posted 3 years ago #

    Hi FranceImage, thanks a lot, you're completely right, I implemented it and it works perfectly! :)

  6. tariaki
    Posted 3 years ago #


    Couldn't apply the CSS fix on the WordPress Theme I'm using called Ultimatum. It has it's own Tabs shortcode.

    That's my site

    Also noticed that the map finally loads properly but only after a very long time - more than 2 minutes!

    Any ideas?

    Thanks :)

  7. FranceImage
    Posted 3 years ago #


    There is a flaw you can report to your theme developer: there is no style for the hidden tab content.

    Your hidden panes are styled with class="tab-content"
    They should have something like class="tab-content tab-hidden"

    Then only you can solve the google map problem

    .tab-content .tab-hidden {
       position: absolute;
       left: -10000px;

    Does it make sense ?

  8. tariaki
    Posted 3 years ago #


    Thanks for your quick reply :)

    Yes that makes sense.

    I went on to install a third party Tabs plugin but seems that this one doesn't load the map at all. Tabs looks nice though :)

    Link Here

    Any ideas?


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Comprehensive Google Map Plugin
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic