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

[LakesMarketing]

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

[Chris]

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

http://mappresspro.com/mappress-faq

[LakesMarketing]

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.

[LakesMarketing]

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

[Chris]

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

[LakesMarketing]

(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

[LakesMarketing]

THis is the demo site

 

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

[LakesMarketing]

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

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

[Chris]

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

[LakesMarketing]

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

[Chris]

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.

 

[LakesMarketing]

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!

 

[Chris]

Hi,

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

[LakesMarketing]

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

[Chris]

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();
}

[Author]

Posts