Google map in tab

The plugin is designed to allow pretty much anything in the tab content and shouldn’t change how it displays.

I don’t know if there’s anything that can be done about this as google maps are usually embedded at a fixed size, so by default won’t respond to a the size of the container in a responsive layout. It is possible to add some CSS to improve this, but this is unlikely to be an issue with the tabby plugin.

I don’t mind taking a look though to check if there’s anything I can suggest.

How are you embedding the map – are you using a plugin for that?

Also can you provide link to a page on your site with embedded google maps – with maps embedded directly on the page as well as within a tab so I can compare how they display.

Hi there again and thank you for your kind answer. I think the problem depends on google and I see that there are some workarounds for other tabs plugin. For example, this is the script that I used with jquery ui tabs plugin:

<script>
jQuery(function($) {

$("body").bind("tabsactivate", function(event, ui) {
    $("#" + ui.newPanel[0].id + " div.flxmap-container").each(function() {
        var flxmap = window[this.getAttribute("data-flxmap")];
        flxmap.redrawOnce();
    });
});

});
</script>

[Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

Basically the script should redraw the map when the hidden tab is clicked. Unfortunately I’m not good at jquery and I cannot produce a solution myself!!!

I can also provide you a link, but in private, because the site is not public yet. Tell me how can I send you the link….

It sounds like the tabs are working as they should and this is general google maps issue rather than one specific to the tabby plugin.

If I could see the site I might be able to come up with some ideas, however I can only provide free plugin support in public on the forum.

I am having the same problem. From what I’ve read, the normal solution to having a google map embedded in a block that is not displayed at load is to use the following:

google.maps.event.trigger(map, 'resize');

The problem is, this blows out the javascript for the tabby plugin for some reason.

Do you have any further thoughts on this.

Thanks.

If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else’s topic.

I am now closing this 3 month old topic as it references an older version of WordPress & has been resolved.