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:
jQuery( "#map-content" ).html( 'Loading content....' );
jQuery( "#map-content" ).load( data.content );
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:
<div id="map-content">Click for more information</div>
If you’re using the new WordPress block editor (Gutenberg) you can add a HTML block:
And that’s basically it. To recap:
- Add the URL and selector to the Action Content of each marker/region;
- Set the Click Action to Custom
- Place the map on a page
- On that same page add the div with the specific id used in the code to display the content there