Displaying maps in jquery ui tabs fails WordPress

Robert Seyfriedsberger comments:

thanks for your quick reply - might be a way to go. Question is, if this will work with other map providers like OSM too - anyway I am using leaflet.js and the final solution should be leaflet-centric if possible...

zebra webdesigns comments:

I have faced a similar situation and the solution is I removed tabs option for map area alone.
which tabs plugin you are using now.

zebra webdesigns comments:

Hello Robert

any luck so far.
I am trying my best to get it solved. I just need a clarification.
are you loading the tabs first or the map.
in the following thread the last comment explains a concept of loading delay.

Have you tried it and you could actually bypass this by using another way of hide and show method using jquery. where you can mockup the jquery effect.
Below is the jquery method I used for my client for some other purpose.
You could actually use this for yours with a little tweak

<script>
jQuery("#home").click(function () {
jQuery(".test").addClass("highlight");
jQuery(".test1").removeClass("highlight");
jQuery(".test2").removeClass("highlight");
jQuery('#submit').removeAttr('disabled');;
});
jQuery("#moving").click(function () {
jQuery(".test2").addClass("highlight");
jQuery(".test").removeClass("highlight");
jQuery(".test1").removeClass("highlight");
jQuery('#submit').removeAttr('disabled');;
});
jQuery("#carpet").click(function () {
jQuery(".test1").addClass("highlight");
jQuery(".test").removeClass("highlight");
jQuery(".test2").removeClass("highlight");
jQuery('#submit').removeAttr('disabled');;
});
</script>

zebra webdesigns comments:

I forget the thread link
stackoverflow.com/questions/9458215/google-maps-not-working-in-jquery-tabs

The script I gave is used as such directly in custom template.
THe advantage is map will be there. but it will be hidden.

to see the live effect see the following site.
http://kardasdesign.com.au/

Robert Seyfriedsberger comments:

Hi,
thanks but I am not sure if this will work - do you happen to know another jquery ui tabs plugin? Another user reported the same error with another plugin and from my understanding, this has to do with a gerneral jquery ui issue...

zebra webdesigns comments:

Obviously this is not the issue of Map script. The problem is the width is not properly taken . Whats your exact requirement over here. are you going to show only two maps in tabs or n number of maps.

If the number of tabs is predefined my solution is much easier. even if its is n numbers. you can customize the script.
the final result should be The effect that matters. If I am not mistaken.

Robert Seyfriedsberger comments:

ok thx - will have a look into your solution later in detail and come back to you.
thanks for your effort anyway!

zebra webdesigns comments:

:) My script dont need separate jquery It uses default wordpress Jquery and its running on the latest wordpress version I will PM the full code for your reference

Robert Seyfriedsberger comments:

Thanks again for your input - it helped finding a solution (which is a bit different than your solution - I redraw the map via leaflet.js function invalidateSize() and then then map shows up correctly).