Lightbox Maps for WordPress

Vector Map of Ireland with Lightbox effect

Map of Ireland Placeholder
Map of Ireland

Using vector maps instead of flash maps is a must these days. SVG maps are compatible with most of the new devices, like iPad and iPhone, as well as the most recent Android powered devices. With Interactive World Maps plugin for WordPress, you can create an array of maps, very easily, with a very intuitive administration form. In this example we created a map of Ireland, divided by its regions, and added colored markers to some locations, in this case, to whiskey breweries, just to serve as an example.

To place the markers, we just used textual information, but it’s also possible to add the markers with latitude and longitude values, for a faster and more precise placement and loading of the markers.

We extended the interactivity of the maps, by creating a custom javascript option, to open a lightbox window with an image. This option doesn’t come by default with the plugin, you will have to select the option of creating a custom action and use the lightbox code for it to work. By default the plugin already includes some Interactive actions, like opening an alert box, redirect the user to another URL, or display HTML information above or below the map. But since you can create custom actions, you can extend the interaction further. We also included some extra simple CSS to have the pointer cursor, when hovering the markers. The maps can also be customized with some advanced CSS selectors.

Check the screenshot below, to see how easy it is to set up a map like this:

(click to enlarge)

This plugin uses the powerful Google Geochart API to generate the maps.


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:

type: 'image',
href: value

If you want to display the content and not an image, the code would be:
content: value

An Iframe:

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.

Get Interactive World Maps Today - $29

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

Buy Now