[PRO] How to Display content below or next to the map

In this article

1. Display content next to the map

2. Set default content

The PRO version includes several click actions that allow you to display custom HTML content outside the map, above, to the right or below.

View Example Map

How to display content next to the map

To achieve this you simply need to select the proper click action, either in the default options or specifically for that entry. The content you want to display should go into the ‘Action Content’ field and it accepts HTML code.

[PRO] Display content below or next to the map

In the example above, when clicking on the state of California we have a content area appear outside (to the right) of the map. I easily added an image of the flag of California above the content by utilizing and adding html coding to the action content box which will look something like this:

<img class="alignnone size-medium wp-image-426" src="https://indicate source of your image.png" alt="Flag of Califonia" width="150" height="100" /><br>California is a state in the Pacific Region of the United States. With 39.6 million residents across a total area of about 163,696 square miles (423,970 km2), California is the most populous U.S. state and the third-largest by area.

By doing so, it will look like this:

Here's a quick video tutorial for this below:

Set default content

The description field of the map, will be the default content that will display to the right of the map, when it first loads.

If you want to have the content of a region display when the map loads, you can use a custom javascript snippet to simulate a click on that region as soon as the map loads. To do that you can add this to the custom JS field of your map, changing the map ID and region code:

// replace with your map ID and region code.
let mapUID = 236195;
let regionCode = 'US-CA';
let mapContainer = document.getElementById('map_' + mapUID);
mapContainer.addEventListener('mapready', function(ev) {
  let urlParams = new URLSearchParams(window.location.search);
  let myParam = urlParams.get('mregion');
  if(!myParam){
    setTimeout(function(){ iMapsManager.select(mapUID, regionCode) },500); 
  }
});

The code above will simulate a click in California, as soon as the map loads.

You can use other javascript public methods.

[PRO] Select Region by Default when page loads

[PRO] How to Display specific map on click

[PRO] How to Load Content from External Page

[PRO] How to Select Region by Default when page loads

[PRO] How to Add Drill Down Maps