[Resolved] Map not displaying on slidetoggle

[Author]

Posts

[marcB-6]

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

Not able to see google map on slidetoggle.
It is working fine on page load.

[Nigel]

Hi Marc

I can't see how you've built the page, but Google Maps not initially showing on a page when they are hidden in a non-active tab is a known problem (generally, not specific to Toolset Maps).

If you Google you'll find lots of suggested solutions using JavaScript, though when I handled a ticket like this before I was able to fix the issue with just the following CSS:

.tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .tab-pane.active {
    display: block;
    height:auto;
}

That may or may not work for you depending on how you've added the tabs.

The basic problem is that if the height of the tab is zero (to hide the content) then Google will draw the map based on that height, so you need to use an alternative way of hiding the content initially using CSS (by modifying the selectors in the above if necessary), or by triggering a redraw of the map using JS once the tab is "revealed" at its full height.

[marcB-6]

As you can see in this page : hidden link
There are 3 toggles, Search, filter, on map. when you click on map it will slide toggle with map. Unfortunately we are not able to see it.

Note : Map is there but not visible due to slide toggle.

[Nigel]

If a CSS-fix is not an option then you can re-render the map using JavaScript.

Where you have the code that reacts to the click on the "on map" link to reveal the map container you need to also run the following:

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

If there is a callback to say when the animation that expands the hidden section is complete you can use that to run this snippet, but in any case it must be run after the reveal has started and the container no longer has a display: none rule.

[marcB-6]

Thanks!!

[marcB-6]

working 🙂