[Plugin: Comprehensive Google Map Plugin] Google Comprehensive Maps in jQuery Tabs

rafikipress
(@rafikipress)

13 years, 10 months ago

Hi,

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,

Willem

OTHER REFERENCES :

http://stackoverflow.com/questions/3014156/google-maps-and-jquery-tabs

https://groups.google.com/forum/?hl=en&fromgroups#!topic/Google-Maps-API/AnELFfPXbsI

https://groups.google.com/forum/?fromgroups#!topic/jquery-en/SE1s1f0qZM0

http://ww.wp.xz.cn/extend/plugins/comprehensive-google-map-plugin/

Viewing 7 replies - 1 through 7 (of 7 total)

lenamtl
(@lenamtl)

13 years, 10 months 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.
leoloso
(@leoloso)

13 years, 1 month 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;
...
					//});
			}(jQueryObj));
		}
	})();
}
my_cgmp();
```
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') {
				my_cgmp();
			}
		})
	});
}
```
FranceImage
(@franceimage)

13 years, 1 month ago

Hi,

there may be a simpler solution

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

leoloso
(@leoloso)

13 years, 1 month ago

Hi FranceImage, thanks a lot, you’re completely right, I implemented it and it works perfectly! 🙂

tariaki
(@tariaki)

13 years ago

Hi

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 🙂
FranceImage
(@franceimage)

13 years ago
Hi,

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 ?
tariaki
(@tariaki)

13 years ago

Hi

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?

Cheers

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘[Plugin: Comprehensive Google Map Plugin] Google Comprehensive Maps in jQuery Tabs’ is closed to new replies.

Tags