New to the community? Start here

Multiple Maps in jQuery tabs not working

I'm using the Google maps in some jQuery tabs, and it doesn't seem to be working. Any help would be much appreciated.

Thanks,

-Neil

[attachments are only viewable by logged-in members] [attachments are only viewable by logged-in members]

Wed, 17 Jul 2013 13:24:29
  • PC
    • WPMU DEV Initiate

    Hello Neil,

    Greetings and thanks for your post.

    Can you please provide a link to your site so that I can see if there are any errors ?

    Maps work fine when entered in any regular post or page using a shortcode however I will need to see what is going on your site so that I can look for more information and assist accordingly.

    Please advise

    Cheers

    PC

    Sales &Support

  • Neil Link
    • Flash Drive

    PC,

    No problem. However since the site is restricted to public access, I’ll have to send you login credentials. Shortly You’ll receive an email from me to your profile’s listed email. If you need anything else let me know.

    Thanks,

    -Neil

  • PC
    • WPMU DEV Initiate

    Hello Neil,

    Sorry to have kept you waiting on this one.

    I tested it and noticed a strange issue. When we first load the page. It shows up fine in the first tab

    Then I click on the second location and it works fine too

    Then I click on the first tab and it does not work. Or lets say it appears that it does not work. As soon I try to view the errors on page using Ctrl+shift+J in chrome, the map appears instantly.

    Let me ask our lead developer @Vladislav on what might be happening. Perhaps the jquery is only working when we are trying to view the errors.

    He should be here sooner than later.

    Cheers

    PC

    Sales &Support

    [attachments are only viewable by logged-in members] [attachments are only viewable by logged-in members]

  • Neil Link
    • Flash Drive

    PC,

    No worries, thanks for taking a look.

    That’s really weird…Here is some more info on my tests

    I’ve tested the following:

    Chrome: 28.0 in Win 8

    FF: 22.0 in Win 7 and 8

    IE: 10.0 in Win 8

    IE: 9.0 in Win 7

    All of them worked as I noted above. First tab worked, second tab is not loading at all.

    Thanks guys!

    -Neil

  • PC
    • WPMU DEV Initiate

    Hello Neil,

    Thanks for posting back and adding additional info.

    I was able to get the second tab loaded as soon as I pressed Ctrl+Shift+J (Shortcut to view errors on page) the map query was executed and it showed up the map in the second tab.

    I have sent another note to @Vladislav and will wait for his response on the same.

    Cheers

    PC

    Sales &Support

  • Vladislav
    • Dead Eye Dev

    Hi,

    I think this kind of behavior has to do with the maps not being visible at the time of their creation – the Maps API dislikes that. The fact that they re-appear as the window repaints (i.e. on console open) as @PC said, seems to indicate this too. The plugin does come with a walk-around solution for this kind of situation, where the maps should recover over time (300ms to be precise). It’s possible there’s some sort of javascript conflict that prevents this from happening, though.

  • Vladislav
    • Dead Eye Dev

    Hello,

    Thank you very much for this, seeing it in action really helped figure out what’s going on. The best way to deal with it would be to add this bit of script to your page:

    <script>jQuery("#tabs").on("click", "li", function () { jQuery(window).trigger("resize"); });</script>

    This bit of script will trigger the window repaint event when needed, and it’ll make sure your map sizes are respected.