[Pro] Load Content from External Page

You are here:
In this article

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:

https://interactivegeomaps.com/pricing/ .wp-block-atomic-blocks-ab-pricing

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

[Pro] Load Content from External Page

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.

[Pro] Load Content from External Page

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:

[Pro] Load Content from External Page

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
  • Add the custom Javascript code
  • 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

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.


Live Example


Click the marker to load content.

Posted by Carlos Moreira

Lead developer of Interactive Geo Maps plugin.