How To

Hidden features, tips and advanced tricks to customize your map

Learn how to extend the functionality or customize the visuals of your map even further with these workarounds, custom actions and custom CSS.

The maps are generated using the Google Geochart API, which has some limitations. But with some css and javascript we can create workarounds to achieve what we need.

Icons Marker Placeholder
Icons Marker

Use icons instead of round markers

United States Map Placeholder
United States Map
Coordinates Example Placeholder
Coordinates Example

Overlay markers or text on regions map

US Group Example Placeholder
US Group Example

Group entries with the same data

Subcontinents with group Placeholder
Subcontinents with group

Create a continents map with the Americas divided

Italia II - Base for Markers Placeholder
Italia II - Base for Markers
Italy Markers Placeholder
Italy Markers

Hide neighbour countries in markers mode

External Content Placeholder
External Content

Have external elements interact with the map

Load Content with Ajax Placeholder
Load Content with Ajax
Click the US to load content from the front page.

Load content from another page with jQuery/Ajax

All countries Placeholder
All countries

Zoom & Pan! Cooming Soon! 🙂 Ask us about this new feature.

More tutorials coming soon:

  • How to display shortcode content as the map action value
  • Load existing content from another page when you click a region or marker
  • Remove or change the colour of the country borders
  • How to change default country crop
  • How to add an image to the tooltip
  • How to display dropdown with the map entries
  • Display content in a lightbox

Searching for some other feature?

If the feature you’re looking for is not listed here, feel free to contact us and let us know what you’re looking for. Not everything will be possible to achieve, the Geochart API has it’s limitations, but CSS and Javascript can do some magic.