Fix Map Size when hidden in tabs

The Problem

The maps are generated using the Google Geochart API, which doesn’t output responsive maps. However, the plugin includes a script to make the maps responsive. When using the map shortcode, with the responsive mode enabled, inside a hidden element such as a tab, an accordion or a hidden inline element to be used in a lightbox, the map will often display with an incorrect size. This happens because of the way the responsive mode works. The responsive script will check the available space for the map, but this operation fails when the map is wrapped in a hidden element, since it’s not possible to calculate the size of an element with the ‘display:none’ css parameter.

Hidden map with default size > click to see

— Available Space —

 

All countries Placeholder
All countries

The Solution

To solve this we can use an extra parameter in the map shortcode, to point the script to another element on the page to calculate the size from.

width-selector='#element-id'

We can use a ‘.class’ selector or an ‘#id’ selector.
This will often be the first opened tab for example, since the other tabs should have the same size. If the first tab also has a map, we could use the id of that map.

Why not input the width directly in the parameter? You might ask. The reason is that this way the maps wouldn’t be responsive. The width might not be the same according to screen sizes. If you want the maps to have a fixed size across all devices, then you can disable the responsive mode completely.

Examples below:

Europe Placeholder
Europe

Europe Placeholder
Europe

Hidden map with width-selector parameter > click to see

— Available Space —

All countries (Copy) Placeholder
All countries (Copy)