Load content from another page with Ajax

jQuery is a very powerfull tool, so we can use it to build custom actions for our maps. In this example we’ll show you how to use the jQuery load() feature to load content from another page.

Load Content with Ajax Placeholder
Load Content with Ajax
Content Will Display Here.


Code Used

Custom Action for Map

jQuery( "#map-content" ).load( value );

If you want to add a message, like ‘Loading content…’ before the actual content loads, you can use this version:

jQuery( "#map-content" ).html( 'Loading content....' );
jQuery( "#map-content" ).load( value );

Content in Page

Together with your map shortcode, you should add an extra div, where the content will display.

<div id="map-content">Content will display here.</div>

Map Admin Screenshot


Notice that in the action value field for each entry, we include the URL to the page we want to load and a #identifier for the section we want to load.