1. Live Example

In the current version of the plugin, it’s only possible to load content from an external page using the Custom Action option, which allows us to trigger some custom javascript when a marker or region is clicked.

In this example we’re going to use jQuery to load content from an external page. Most themes load jQuery, but some might not, so this might not work, but there are alternative ways.

We will use the jQuery.load() function to do this, which allows us to fetch a URL, even select a specific part from that page using a CSS selector and then display it where we want on the page.

For each marker or region, in the ‘Action Content’ field, we should add the complete URL of the page we want to fetch and the selector for the section of the page we want to display. In the example you will see below I used:

This will fetch the pricing page and narrow down the content to the block that has the class .wp-block-genesis-blocks-gb-pricing.

For each of the markers or regions you should add a URL with this format, if you want it to display content.

Next you need to set your marker or region click actions to default, then on the default options select the ‘Custom Action’ option, which will reveal a textarea where we can add the custom code.

The custom code is the following:

Notice we are using the #map-content selector to tell jQuery to place the content on a container on the page that has that specific ID.

We can now save the map and add it to a page. On the page where you add the map we will also need to add the div where the content will display. Example code below:

If you’re using the new WordPress block editor (Gutenberg) you can add a HTML block:

And that’s basically it. To recap:

Hopefully in future versions of the plugin this will be easier. But this is just an example on how you can use the custom javascript action to extend the functionality of the plugin.