[Resolved] Maps not zooming in correctly and marker missing

[Author]

Posts

[lifehouseG]

I am trying to:
Add multiple maps into a tabs so different locations can be shown under different dates.

Link to a page where the issue can be seen:
hidden link
pw: staging

I expected to see & Instead, I got:
Bottom of page has the "Coming by Car" section, the map works fine in first tab, then in the second, third & fourth tabs it shows the map zoomed right out. second map has one car park marker missing, third & fourth are the same content added as the first tab parking (just from a different post form, but same information).

I have checked and double checked, however still get same result.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

I visited your page but I can't see how you constructed it to have an opinion about what is being displayed.

Could I get credentials for the site to take a look?

I will mark your next reply as private so that I can get log-in details from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

I see you are using a page builder which I'm not familiar with.

Where can I find these global blocks to know what you are inserting, where..?

And can you clarify what I should be seeing?

On this page: hidden link

there are four tabs with maps, plus a map at the bottom.

The map at the bottom is supposed to update whenever you click on one of the tabs, and it shows parking near to the locations?

And the problem is that when you click on a tab and the map updates, it is zoomed out?

Anything else?

[lifehouseG]

Hi Nigel,

What you should be seeing on: hidden link

Is toolset maps and content for each date in the four tabs. But the bottom map with the car parks, which should have the venue location (black marker) and 2x parking spot (blue markers). The bottom map shows the venue location and two car parks close to the venue, however on the other tabs it shows the map zoomed right out for some reason, this is the problem (works fine on the first tabs, but the 3 others have this problem).

The toolset content is in the Global Blocks and then these Global block short codes are put into the tabs and then put into the page. To see the actual typeset content follow the screenshots I've attached. (there is a global block for each tab Week 1, Week 2, Week 3, Week 4).

Does this make sense?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Thanks for that. I took a closer look, and I think I know the problem, but I'm not familiar enough with the theme to suggest a solution.

It is well know that Google maps have problems rendering properly when they are initially inside tabs and their container has the style rule display: none.

Nothing to do with Toolset Maps, it's a general problem and if you google it you will find a variety of solutions recommended.

One is to change the styles so that instead of applying display: none you might set the opacity to zero, for example.

Another is to use a JS event to trigger re-rendering the map once the tab is exposed.

So, for example, if you click on the second tab, then in your browser dev tools in the console you run

WPViews.view_addon_maps.reload_map('Sunday2-1');

You will see the map re-draw, correctly zoomed.

You can see where I provided help for a similar problem with Divi tabs here: https://toolset.com/forums/topic/maps-not-showing-properly-in-divi-tabs/

I was able to help there because Divi is a supported theme. Yours is not, I'm afraid, and I don't know enough about it to propose a concrete solution.

If you are proficient with JS you should be able to adapt that for your theme.

[lifehouseG]

Hi there,

Thanks for looking into that, okay I'll take a look at these threads and see what can be done.

Thanks, will call out if need any assistance with it

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

OK, good luck, and if you get stuck on something specific I may be able to help.