Documentation

Thank-you for considering mapPlug for your content mapping needs.
please ensure you have downloaded and installed the JQuery JavaScript library before even attempting to use this plug-in!
JQuery website

Licensing and Copyright

You must adhere to the Google Maps Terms of use when using this plug-in.
MapPlug © Copyright Tom Aske 2011 All Rights Reserved

MapPlug by Tom Aske is licensed under a Creative Commons Attribution 3.0 Unported License.
This Creative Commons License means you can share and adapt this plug-in but you must attribute the author, thats me :)

Compatibility

This plug-in is compatible with the following browsers:

IE 7.0+
Firefox 3.0+
Safari 4+
Chrome
Safari for iOS

The Plugin is compatible with JQuery 1.4+

Examples

Here are some examples of how mapPlug can be used:

Example One

This first example shows how a user can simply add a map to their webpage.

$("#ex1").mapPlug();

Example Two

the second example shows how to add options to the map.

$('#ex2').mapPlug({ //SPECIFY OPTIONS HERE zoom : 14, center: new google.maps.LatLng(52.477743,-1.875127) });

Example Three

The third example shows how to add data to the map.

//NEW

//specify icon parameters.

var iconWidth = 50;
var iconHeight = 50;
var iconAnchorX = 25;
var iconAnchorY = 50;

var categories = [
['Text', 'images/Icons/textIcon.png'],
['Image', 'images/Icons/imageIcon.png'],
['Video', 'images/Icons/videoIcon.png'],
['Audio', 'images/Icons/audioIcon.png'],
];
// SPECIFY SHADOW
var shadowURL = 'images/Icons/shadows.png';
var shadowWidth = 150;

//SPECIFY DATA HERE IN THIS FORMAT
//[TITLE, LONG, LAT, Z INDEX, CATAGORY(ONE OF THE ABOVE), CONTENT URL, DESCRIPTION]
var content = [

['MailBox', 52.472403,-1.88914, 4,'Image','images/image/mailbox.jpg','Image of the Mailbox.'],
['Bagel Tech Podcast', 52.481403,-1.87484, 1,'Audio','audio/bagelTech121.mp3','5 minute snippet of Bagel Tech News<br /> Lots of fun and Bagel Tech mirth and plenty of editing for Ewen'],
['City Night Motion Graphics.', 52.474403,-1.85484, 2,'Video','video/titles%20iPad.m4v','This is an exciting title sequence created in Adobe After Effects<br /> File Format M4V'],
['MapPlug Readme Document', 52.473403,-1.90484, 3,'Text','text/TXT.rtf','MapPlug Readme File'],
];
$(window).load(function () {
//CALL PLUG IN TO DIV MAP_CANVAS
$('#map_canvas').mapPlug({
//SPECIFY OPTIONS HERE
zoom : 14,
center: new google.maps.LatLng(52.477743,-1.875127)
},content,categories);

});

Problems?

any issues do not hesitate to contact me at Thomas.Aske@mail.bcu.ac.uk