Add map shortcode to a template's tabbed content … not working

Home Forums MapPress Support Add map shortcode to a template's tabbed content … not working

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #12429
    LakesMarketing
    Participant

    Hi,

    For some reason the Map shortcode is not viewing correctly in my template’s tabbed content:

    www(dot)nptravel(dot)wpengine(dot)com/test-map-in-tab/

    The template shortcode looks like this

    [tab]
    [tab_item title=”ITEM_TITLE”]ADD_CONTENT_HERE[/tab_item]
    [tab_item title=”ITEM_TITLE”]ADD_CONTENT_HERE[/tab_item]
    [tab_item title=”Map”]
    [mappress mapid=”1″][/tab_item]
    [/tab]

    Please can I ask is this to do with the plugin or the template?

    Thanks

    #12430
    Chris
    Keymaster

    Hi, it’s probably the Google API.  Please see here for some more info:

    http://mappresspro.com/mappress-faq

    #12431
    LakesMarketing
    Participant

    Hi Chris,

    Thanks for your quick reply.

    I’m not sure it’s to do with the Google API because If I paste the shortcode outside of the tabbed content the map displays OK.

    If you have a look again at: www(dot)nptravel(dot)wpengine(dot)com/test-map-in-tab/

    you will see the map underneath displaying OK

    I’ll have a read on the link you sent in case.

    #12432
    LakesMarketing
    Participant

    Sorry … that link is exactly what the problem is.

    I’ll try the fix you mention … but I think the template author will just say this is a problem with the plugin … & Google API

    #12433
    Chris
    Keymaster

    You can also blame the browsers, which report zero size for hidden elements… 🙂

    #12437
    LakesMarketing
    Participant

    (Sorry was having trouble posting – anyways.)
    Hi Chris,

    I’m waiting to hear back from the template author. But I have been playing around with it and can’t seem to get it to display by adding the visibility: visable etc.

    But one thing I did notice that was strange and might point to a solution is:

    – Open the inspector (I’m using Chrome)
    – Click on the map tab and see it’s not displaying correctly
    – Go to a different browser window/tab
    – Go back to the page and the map reloads correctly

    If you don’t have the inspector open it doesn’t reload.

    Does that give a clue to how to fix it?

    Thanks

    #12452
    LakesMarketing
    Participant

    THis is the demo site

     

    www(dot)nptravel(dot)wpengine(dot)com/test-map-in-tab/

    #12455
    LakesMarketing
    Participant

    To access you may need to use http:// instead of www

    Sorry for some reason I couldn’t put thing all in one message …

    #12462
    Chris
    Keymaster

    Hi,

    There is no solution or fix other than the workarounds outlined in the FAQ.

    The browser reports hidden fields as having zero size, and the Maps API then draws only a small corner of the map.  Google’s solution has been to offer a resize event you can trigger when a tab becomes visible.

    I would suggest using jQuery UI tabs, or a plugin based on that library, in which case I have a workaround built in to MapPress that should work to trigger the resize event.

    To instead continue using the existing tab control, you’ll need to trigger the map’s resize() method when its containing tab becomes visible.  The ‘tab selected’ event depends on the control (and some don’t make one available at all).

    #12468
    LakesMarketing
    Participant

    Hi Chris,

    Thanks am testing out the ‘Post UI Tabs’ plugin which is the same, I think, as jQuery UI tabs.

     

    The template author has come back and said the Tabs are using jQuery. Here is what they said:

     
    I think redrawing it should do, but I’m not quite sure how to get the mapp variable too.
    BTW, the tab code is in javascript/gdl-script.js file,
    Around line 48, you’ll see

        // Tab
        var gdl_tab = jQuery(‘div.gdl-tab’);
        gdl_tab.find(‘.gdl-tab-title li a’).click(function(e){
            if( jQuery(this).hasClass(‘active’) ) return;

            var data_tab = jQuery(this).attr(‘data-tab’);
            var tab_title = jQuery(this).parents(‘ul.gdl-tab-title’);
            var tab_content = tab_title.siblings(‘ul.gdl-tab-content’);

            // tab title
            tab_title.find(‘a.active’).removeClass(‘active’);
            jQuery(this).addClass(‘active’);

            // tab content
            tab_content.children(‘li.active’).removeClass(‘active’).css(‘display’, ‘none’);
            tab_content.children(‘li[data-tab=”‘ + data_tab + ‘”]’).fadeIn().addClass(‘active’);

            e.preventDefault();
        });

    Does that make any sense?

    He says ‘redrawing it’ would do it? What does that mean? Will this make the map work?

     

    Thanks

    #12472
    Chris
    Keymaster

    Hi,

    The template’s tabs are using jQuery – but they aren’t using the jQuery UI tabs library.

    You’ll probably be better off just using the Post UI Tabs version.  But if you or the template author want to edit the existing javascript, the command to ‘redraw’ the map is just as listed in the FAQ:

    mapp0.resize();

    You would need to put it inside the click() function in the code you provided.

     

    #12486
    LakesMarketing
    Participant

    Hi Chris,

    Thanks that is really useful.

    Please can I double check if I wanted to insert redraw command into the click function would it simply look like this:

     

    // Tab

    var gdl_tab = jQuery(‘div.gdl-tab’);

    gdl_tab.find(‘.gdl-tab-title li a’).click(function(e){

    mapp0.resize();

    if( jQuery(this).hasClass(‘active’) ) return;

     

    Thanks for your help!

     

    #12487
    Chris
    Keymaster

    Hi,

    That looks right, I’d say just move the resize below that last line.

    #12489
    LakesMarketing
    Participant

    Hi Chris,

    Thanks so much … it’s now working by placing that at the very end of that snippet. As the last line just before the }); sign off.

    BUT .. I’ve had to add it twice to work for all my maps, as the following:
    mapp0.resize();
    mapp1.resize();

    Does that look correct? I’ve checked and assume the 0 and 1 character does not refer to the map ID … so hopefully adding 0 and 1 will fix all future maps?

    Thanks again for all your help … you have been much more responsive that my template author!

    Cheers,
    Nick

    #12492
    Chris
    Keymaster

    Hi Nick,

    By default mapp0, mapp1, …etc indicate the first map on the screen, second, and so on.  You can use the ‘name’ parameter in the shortcode to name your maps something else.

    You’ll need to call that resize() function for each map inside the tab.

    If you want to future-proof it, you could try searching for class ‘mapp-canvas’.  Any <div> with that class will have as its ID the name of its corresponding map object.  For example this should resize all maps on the screen:

    jQuery(‘.mapp-canvas’).each(function() {
    var id = jQuery(this).attr(‘id’);
    var map = window[id];
    map.resize();
    }

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.