Ask your WordPress questions! Pay money and get answers fast! (more info)

Displaying maps in jquery ui tabs fails WordPress

  • SOLVED

I am the developer of mapsmarker.com and having issues displaying my maps in jquery ui tabs.
See an example at http://pro.mapsmarker.com/?page_id=60

First you see a map 1 loading outside of jquery ui tabs which works fine. Below I added a
sample tab content area in which I try to load Map 1 and Map 2.

Result: only a small part of the map is displayed. I searched a lot but couldnt find out what
css definition is causing this. Can anyone help please?

Thx,

Robert

Answers (1)

2013-08-08

zebra webdesigns answers:

Hello Robert

This is a common problem faced by lot of people. Below is the link you could get some useful information related about this.
http://stackoverflow.com/questions/9458215/google-maps-not-working-in-jquery-tabs

The recommended method is to trigger the map function by adding a event listener through Jquery

In the mean time I look for more appropriate solution.
Good luck to you :)


Robert Harm 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 Harm 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 Harm 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 Harm 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).