The maptastic class has two uses.
- 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.
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:
position: absolute !important;
left: -10000px !important;
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%
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:
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.