jWorldMaps jQuery Plugin

Using the Plugin

Using the jWorldMaps plugin is simple, and requires only a few steps:

1. Add a <script> reference to the jQuery library. jWorldMaps supports jQuery version 1.4 or newer:
   
   

      1: <script type="text/javascript" 

      2:     src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js"></script>

   
   Note: 2 perf tips…first, as shown above, use a CDN-hosted version of jQuery to improve performance, and second, where possible, locate scripts towards the bottom of the page to avoid blocking downloads of other elements.
2. Add a reference to the jWorldMaps plugin:
   

      1: <script type="text/javascript" 

      2:     src="[path on your site]/jWorldMaps-1.0.min.js"></script>

   (you'll need to download a copy of the plugin script library and reference your local copy, or you can reference the CDN version instead):
   

      1: <script type="text/javascript" 

      2:     src="http://cdn.myworldmaps.net/scripts/jWorldMaps-1.0.min.js"></script>

3. Add the following initialization code, somewhere after the two script library references, replacing "YOUR-WORLDMAP-ID with the WorldMaps Map ID for the specific account/map you wish to display:
   

      1: <script type="text/javascript">

      2:     $("#wmContainer").jWorldMaps({

      3:         worldMapId : "YOUR-WORLDMAP-ID"

      4:     });

      5: </script>

4. You can optionally add initialization parameters for any of the options listed below, for example to disable tracking if you simply wish to display the map, rather than using it to track hits to your site (useful if you're already using the single-pixel tracking WorldMaps offers), or to turn off the mouseover animation, or to animate from right-to-left if you wish to place the map on the right side of your page rather than the left. You can also modify the initial and hover widths of the images (keeping in mind that this may impact the sharpness of the displayed image) to suit your needs. Here's an example:

      1: <script type="text/javascript">

      2:     $("#wmContainer").jWorldMaps({

      3:         worldMapId : "YOUR-WORLDMAP-ID",

      4:         initialWidth: 250,

      5:         tracking: false,

      6:         animateTo: "left"

      7:     });

      8: </script>