World Maps for WordPress

World Map with all countries

All countries Placeholder
All countries

Data for all the countries

World Map with vector icons as markers

The Google Geochart API doesn’t allow us to use custom markers, but with some CSS magic and using the FontAwesome toolkit library we can use vector icons instead of the default round coloured markers!

Icons Marker Placeholder
Icons Marker

Learn more about this technique.

Clickable World Map Example with Lightbox Effect

FancyBox Example Placeholder
FancyBox Example

With Interactive World Maps Worpress plugin and standalone version it’s possible to create custom javascript actions to ‘on click’ events on active regions of the map. In this example I created a lightbox effect to display a picture when the user clicks in one of the highlighted countries.

To achieve that, I installed Fancybox for wordpress free plugin. After I created a map of the world and created a custom action with the following details:

jQuery.fancybox(
{
type: 'image',
href: value
});

If you want to display the content and not an image, the code would be:
jQuery.fancybox(
{
content: value
});

An Iframe:

jQuery.fancybox(
{
type: 'iframe',
href: value
});

I followed the Fancybox API details to build this code. It says the link type will be an image and I set the href as the Action Value for the entries of the map (1st code example). Or I simply set the content to be the ‘value’ of the action value (2nd code example).

Check this image for more details on how the other option were set up in the administration panel of the Interactive World Maps plugin.

lightbox-fancybox    interactive_world_maps_lightbox

 

 

If you are using Foobox plugin, you can check out this code provided by user Kernel-Debugger.

World Offices Map Information Display

 

World Office Locations Placeholder
World Office Locations
Click on the markers for more information

With the Interactive World Maps plugin you can create a World Map and display markers wherever you want. In this Example I created markers in different locations of the world, with custom colors, and I created a custom javascript action to display information about each office on click.
(more…)

World Map – Top countries by visits

World Visits Placeholder
World Visits

In this example I created a world map that shows the top countries that visit this demo website.  You can color the countries with any HTML color code, and write whatever you want in the tooltip. The SVG map of the world is pulled from the Google Geochart API.

Get Interactive World Maps Today - $21

Get this premium WordPress plugin today with 6 months support included.

Buy Now