World Maps for WordPress
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!
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:
If you want to display the content and not an image, the code would be:
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.
If you are using Foobox plugin, you can check out this code provided by user Kernel-Debugger.
World Office Locations
This is an example map of the world divided by continents. With this plugin you can easily set colors for the different continents and set tooltips and onclick actions, like opening a new url or display a alert message.
Read More about what you can do with this plugin.
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.