Support » Plugin: Flexible Map » Issue when displaying the map in a tab

  • Resolved Tempera

    (@tempera)


    Hi,

    Your plugin seems very useful and I would be really happy to use it on my site.

    But I ran into an issue and I don’t know how to solve it..:(

    I am displaying the map in a tab and it’s behaviour is very odd:
    – it sometimes doesn’t display at all (there is only a blank area)
    or
    – the area in the tab where the map should be displayed is grey and a small part of the map (including the marker) displays only in a corner of this area (in the upper left).

    When I use it outside the tab it works just fine. But I need to place it inside a tab along with some contact info, because I have a bunch of other information that needs to be displayed on the same page, and using tabs is the best for my case.

    what could be the problem? I really hope it’s something that can be solved.

    Thank you,
    Ami

    https://wordpress.org/plugins/wp-flexible-map/

Viewing 15 replies - 1 through 15 (of 15 total)
  • Hi

    I’m using tabs too and have run into the same issue. Ami – the tabs don’t allow the map to draw (as their initial state is display none), but I can’t be much more help than that as I’ve tried numerous ways of fixing it, so I’d really appreciate if anyone could help

    thanks

    Plugin Author webaware

    (@webaware)

    G’day Ami / jonesy,

    There’s a couple of solutions discussed in the FAQ. It all depends what sort of tabs you have. Best if you can post links to your pages so that I can see exactly what’s happening.

    cheers,
    Ross

    Hi Ross and jonesy,

    Thank you for answering.

    I personally am using Tabby Responsive Tabs, which is very cool and lightweight. It’s free, you can find it here:
    https://wordpress.org/plugins/tabby-responsive-tabs/

    My site is not yet live so I took a screenshot with the problem. But it seems I can’t post it here. How can I provide you with the screenshot?

    Have a nice weekend!
    Ami

    Hi

    I’m using tabs that shipped with a theme (not sure how you find out what sort of tabs?)

    the page is http://parkvetgroup.com/surgeries/whetstone/ and the tab marked ‘map’ is further down the page, and you can see the incomplete map

    (I followed the instructions of FAQs but can’t find a way of making it work)

    any help would be much appreciated, thanks!

    Nice site, jonesy! 🙂

    I guess I won’t have to find a way to send you the screenshot, Ross, because my map displays exactly like jonesy’s!

    I also tried the solutions in the FAQ (installing the gist and placing the snippet of code on the page template), but they didn’t work for me, unfortunatelly… 🙁

    Plugin Author webaware

    (@webaware)

    @jonesy2324 your theme is using its own very simple tabs script, which doesn’t accommodate dynamic elements like the map inside its tabs. You’ll need to speak to the theme developers and show them the FAQ for making this work in jQuery UI tabs. If they can trigger an event when the tab is selected, then we’ll have something to work with.

    cheers,
    Ross

    Plugin Author webaware

    (@webaware)

    OK, I think I have a general solution that should handle these tabbed displays — at least for modern browsers (not IE 8,9,10). I’ll get a test version up shortly so that you can both try it out.

    cheers,
    Ross

    Plugin Author webaware

    (@webaware)

    G’day Ami / jonesy,

    Please try this test version. It should fix your problems for everything except old versions of IE (10, 9, 8).

    https://dl.dropboxusercontent.com/u/26305751/wp-flexible-map-1.9.0-dev.zip

    NB: I’m not going to fix the problem for old versions of IE. There’s a way, and it affects the browser performance so I’m not putting it into my plugin. Those browsers will die soon, and this problem doesn’t affect the majority of the websites using this plugin, so it’s just not worth the headache.

    cheers,
    Ross

    ahh thanks so much Ross that works !! http://parkvetgroup.com/surgeries/whetstone/

    no problem about IE, they should pull the plug on those

    thanks for the compliment Tempera 🙂

    Hi Ross,

    I also confirm that it works!! Thank you soooooo much!! 🙂
    You are so awesome! 😉

    (I’m also ok with IE being unsupported.)

    Have a wonderful week and happy holidays, guys!
    Ami

    PS: I’ll mark this topic as resolved.

    Plugin Author webaware

    (@webaware)

    Excellent, I’ll get the new release out later this week. You can safely keep using the test version until then.

    cheers,
    Ross

    Hi Ross,

    ten months ago I wrote to my template authors to fix the issue of the map hidden in a tab. They released an update and it was working fine.

    Today I just noticed that I have this issue again, the theme is still the same version and I didn’t change anything else. To be honest I don’t know when the issue appeared again, it’s in a page that I don’t visit that often.

    Right now I tried to apply the fix you say in the FAQs, installing and activating the php code, but still not working.

    What shall I do? This is the page with the problem in the second tab.

    Thanks
    Daniele

    PS. the marker bubble topic is closed, I can’t write there anymore?

    Plugin Author webaware

    (@webaware)

    G’day Daniele,

    I have some code in the current version of the plugin (since v1.9.0) that watches for changes to the style attribute of the map’s container div, and resizes the map on the first style change.

    It’s possible that your theme is doing something that triggers the resize before the map size can be properly computed. Perhaps ask the theme authors if they can trigger a JavaScript event that you can catch to force a resize. Have them look at the code in the FAQ and tell you what your code should be.

    Re: the marker bubble problem, that’s either been closed by the system or by a moderator; I can’t close topics. Perhaps start a new topic if you need to discuss it further. I am unable to get the problem.

    cheers,
    Ross

    Hi Ross, thanks for the answer.

    Theme authors replied to “try adding this to your JavaScript file, in order to trigger map refresh on tab change.”

    jQuery('.thb-tabs').on('thb_tabs.goto', function() {
        jQuery(div.flxmap-container").each(function() {
            var flxmap = window[this.getAttribute("data-flxmap")];
            flxmap.redrawOnce();
        });
    });

    What do you think? Honestly I don’t know where I should paste the code 😀

    Thanks
    Daniele

    Plugin Author webaware

    (@webaware)

    G’day Daniele,

    You want that in your footer. The simplest way is to just add it to your theme’s footer.php inside <script> ... </script>

    If that works, maybe we can work out a nice way to add it only to pages that need it.

    cheers,
    Ross

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Issue when displaying the map in a tab’ is closed to new replies.