jWorldMaps jQuery Plugin
The jWorldMaps jQuery plugin makes it easy to show visitors to your site who's visiting, and where in the world they're coming from. It's simple to implement, requiring just a div tag, a reference to the jWorldMaps script library (and jQuery, of course), and a single line of initialization script. The result is a thumbnail map of your WorldMaps account
(get one here
), which expands to show a more detailed view on mouseover.
Using the Plugin
Using the jWorldMaps plugin is simple, and requires only a few steps:
- Add a <script> reference to the jQuery library. jWorldMaps supports jQuery version 1.4 or newer:
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.
- Add a reference to the jWorldMaps plugin:
(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):
2: src="[path on your site]/jWorldMaps-1.0.min.js"></script>
- 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:
3: worldMapId : "YOUR-WORLDMAP-ID"
- 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:
3: worldMapId : "YOUR-WORLDMAP-ID",
4: initialWidth: 250,
5: tracking: false,
6: animateTo: "left"