If you want to use other shortcodes with your map, you can’t insert them directly in the click value. You will have to insert them on the same page where you use the map shortcode. You have to wrap your shortcodes in container and hide/show the correct container when the user clicks on your map. In the example above we used the following construction:

Changes on your page/post (not within the plugin):

Open a page or post where you want to use your map. We wrapped the shortcodes in the following HTML tags:

<div class="shortcodes-and-map">
	<!-- Container for the map -->
	<div class="map">
		[interactive_map id="113"]
	</div>
	
	<!-- Container for all shortcodes -->
	<div class="shortcodes">
		<div class="shortcode_berlin visible">
			[this_can_be_a_shortcode_for_berlin]
		</div>
		<div class="shortcode_omaha">
			[this_can_be_a_shortcode_for_omaha]
		</div>
	</div>
</div>

<style>
	.shortcodes-and-map .shortcodes > div {
		display: none;
	}
	.shortcodes-and-map .shortcodes .visible {
		display: block;
	}
</style>

Please note that you have to replace the id in the map shortcode. Also note that the last part of the code contains CSS that controls the visibility of the container. If you use tools like Visual Composer, you can click on the gear symbol to insert the CSS there and remove the part from the above HTML.

If you preview the HTML and CSS from above on your page or post, you should see that the first shortcode is visible and the second is hidden. You can easily extend the the construction by any number of shortcodes.

Changes on your map:

The last step is to create a small script that hides all container and shows the correct one. Open your map in the map builder. Then click on “Map Template”. In the template box you can insert the following code to the JavaScript section:

var cont = jQuery("#" + cssid).parents(".shortcodes-and-map");
var divs = cont.find(".shortcodes > div");
divs.removeClass("visible");
divs.filter("." + click_value).addClass("visible");

The lines do the following:

1. This finds the container that wraps all of our HTML.
2. This finds all container for our shortcodes.
3. This removes the visible class from all shortcode container.
4. In the last step we have to find the correct container that should become visible. The click value contains the class of the container that we want to show.

For example, for the Berlin marker we would use the following click value “shortcode_berlin”. If you create your map now, you won’t have to touch the code anymore. You only have to take care of the container and the correct classes in the click values.

It is also possible to show the same shortcode for more than one marker. In this case you simply have to use the same click value.

If you have problems while creating this on your site, let us know and we will try to help you.

The configuration of the map can be found here:

×Close

Download map

• Import data
• Help & Instructions

Copy the following text and click on "Import" in the plugin.

{"name":"Shortcode example","description":"","js_options":"{\"background_color\":\"#ffffff\",\"border_color\":\"#666666\",\"border_width\":\"0\",\"dataless_regions_color\":\"#f5f5f5\",\"enable_region_interactivity\":\"true\",\"height\":\"auto\",\"keep_aspect_ratio\":\"true\",\"region\":\"world\",\"marker_opacity\":1,\"marker_size\":\"10\",\"resolution\":\"countries\",\"tooltip_enable\":\"true\",\"tooltip_color\":\"#000000\",\"tooltip_font_family\":\"<global-font-name>\",\"tooltip_font_size\":\"<global-font-size>\",\"tooltip_trigger\":\"focus\",\"tooltip_html\":\"true\",\"width\":\"auto\"}","js_table":"[{\"location\":\"Berlin\",\"latitude\":\"52.52000659999999\",\"longitude\":\"13.404954\",\"color\":\"#445599\",\"size\":\"1\",\"tooltip_title\":\"\",\"tooltip_text\":\"Show shortcode for Berlin!\",\"click_action_value\":\"shortcode_berlin\"},{\"location\":\"Omaha\",\"latitude\":\"41.2523634\",\"longitude\":\"-95.99798829999999\",\"color\":\"#445599\",\"size\":\"1\",\"tooltip_title\":\"\",\"tooltip_text\":\"Show shortcode for Omaha!\",\"click_action_value\":\"shortcode_omaha\"}]","display_mode":"marker_by_coordinates","template_id":-2,"template_html":"<div id=\"{cssid}\">\n %%map%%\n<\/div>","template_css":"#{cssid} circle {\n cursor: pointer;\n}","template_js":"var cont = jQuery(\"#\" + cssid).parents(\".shortcodes-and-map\");\nvar divs = cont.find(\".shortcodes > div\");\ndivs.removeClass(\"visible\");\ndivs.filter(\".\" + click_value).addClass(\"visible\");"}

This explains step-by-step what you have to do:

The first step is to open the "All Maps" page. On this page you will find an "Import" button. If you click on this button, a small window should open. You have to select the "text" tab and insert the import data there. The final step is to click on "Import". The Map Builder should open with the given map. Note that you have to click on the "Save" button. Otherwise the map won't be imported.

Close

#{cssid} circle {
 cursor: pointer;
}

<div id="{cssid}">
  %%map%%
</div>

var cont   = jQuery("#" + cssid).parents(".shortcodes-and-map");
var divs = cont.find(".shortcodes > div");
divs.removeClass("visible");
divs.filter("." + click_value).addClass("visible");