World Offices Map Information Display

November 9th, 2012 · · Markers, World 42 comments

 

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.

—————————–

UPDATE: From version 3.2.2 of the map, released on January 2013, it is not necessary to create a custom javascript action, the plugin already has a built-in option to display information below the map. You don’t need programing skills to achieve this.

The information below is obsolete, but still serves as an example on how custom actions work with this plugin.

——————————

The map is very easy to build. Check out the screenshot  of the administration panel, with the configurations of this map.

(click to see it bigger)

I choose to create a ‘Custom Action’ in the Active Region Action option and placed this in the custom action field:

document.getElementById('imap29message').innerHTML = ivalue_29[selectedRegion];

This javascript snippet basically says to place inside the div ‘imap29message’ the action value of the clicked region.

On the post/page where I placed the shortcode for the map, I also created a div where the information will display. In this case, in the post, after the map shortcode, I placed:

<div id='imap29message'>Click for more information</div>

To enhance the visual of the maps further, I added some CSS to my theme, to control some aspects of the map. In this case, just a simple rule, for the mouse to turn into the pointer, when hovering the makers.

#map_canvas_29 circle {
cursor:pointer;
}

Get some tips on how to customize the maps further here.

GET THE PLUGIN, and build you own world map!

 

FAQ

Will this work in regions mode?

Yes. If you want to use this custom action in regions mode, where you color full regions instead of placing markers, it is possible. It’s the same procedure.

My map doesn’t display when I put that custom action!

Usually, when this happens, it’s a sintax problem. Make sure you’ve placed the correct code. A common mistake is the ‘quotes’, they often get replaced by invalid quotes in the copy/paste process. Re-write the quotes. Check this image for reference.

The map displays, but nothing happens when I click!

Make sure you are using the correct ID for you map. In the example above i used 29, but you should use you’re map’s ID. If your id=”1″, then the code would be:

document.getElementById('imap1message').innerHTML = ivalue_1[selectedRegion];

and

<div id='imap1message'>Click for more information</div>