Birthday: December 31st

August 2019

February 2020

The maptastic class has two uses.

1. The primary use is when a shortcode or other dynamically loaded element (such as a google map, for which the class is named) needs time and space to calculate it’s display size in the target.
2. The secondary use is to initially ‘hide’ the targets off-page when many collapse elements are being used to prevent the ‘flickering’ effect where the hidden elements are displayed while the page loads, then are hidden once the javascript is finally triggered on document load.

In this post we focus on the primary use. To demonstrate this, we are going to add a google map in a collapse element without using the maptastic class. This is a standard google map embed direct form maps.google.com:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2370.176761299221!2d9.967689000000014!3d53.55461200000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b18f6cbedab441%3A0x6678f70133d32916!2sMillerntor-Stadion!5e0!3m2!1sen!2s!4v1420013219192" width="800" height="600" frameborder="0" style="border:0"></iframe>

That works fine, because the map has iframe has a specific width and height assigned.

Now we will assign a map using a google_maps shortcode and also assign the target a class of maptastic. maptastic is a class that is part of the collapse plugin:

.maptastic {
    position: absolute !important;
    left: -10000px !important;
    display:block !important;
    max-width: 9999px;
}

All together, the complete shortcode will look like this:
(this is the one we need to fix… it should work with just maptastic)

[expand title="St. Pauli" targclass="maptastic"][google_maps id="1875"][/expand]

See how the map is not the correct width? But once we resize the window it will then display correctly.

Now we are going to create a new class for our target that gives it a width of 100%

.mapclass {
   width: 100%;
}

and assign it to the target as well:

[expand title="St. Pauli" targclass="maptastic mapclass"][google_maps id="1875"][/expand]

This is the map without being placed in an expand element:

[[google_maps id="1875"]]

[google_maps id=”1875″]

This is w/o using maptastic and just using expand=”true”:

[expand title="St. Pauli" expanded="true"][google_maps id="1875"][/expand]

Everything is fine. OK… we need to tweak maptastic.