MooTools

How to use

To embed a map on your page, simply instantiate Atlas and pass in an element where it should be located:

new Atlas($('map'));

For more advanced functionality, you may pass several options, which are explained further below.

Syntax

new Atlas(Element, [options])

Arguments

1. Element - (element) The DOM element where the map will be injected.

Options

• key : (string) Your Google API Key. The default value is for localhost.
• type : (string) The type of map which will be drawn. Examples: G_NORMAL_MAP, G_PHYSICAL_MAP, G_SATTELITE_MAP, G_AERIAL_MAP, G_HYBRID_MAP
• zoom : (string) The zoom level of the map. This may be a number, such as 5, or you can use "TO_FIT", which will automatically zoom in as closely as possible, while keeping all markers in view.
• center : (array) The center position of the map.
• locations : (array or string) An array of locations to plot on the map. For dynamic content, you can enter a string which points to a JSON file containing the array. Please see below for formatting.
• icon : (JSON object) The default styles of the map icons. Please see below for formatting.

Option Formatting

locations:

The locations option is an array of JSON object which have the following properties:

• longitude : (string) The longitude of the marker.
• latitude : (string) The latitude of the marker.
• show : (string) Determines whether or not an Info Window should be displayed on load. Leave empty if the window should be hidden.
• html : (string) The content that will be injected into the Info Window. Can be left blank and no window will be shown
• icon : (JSON object) This can be used to override the default icon styles on a marker by marker basis.

Example:

[ { "longitude": "45.497568", "latitude": "-73.576645", "show": "", "html": "Montreal", "icon": { "image": "http://www.google.com/mapfiles/markerA.png", "shadow": "http://www.google.com/mapfiles/shadow50.png", "iconSize": [20, 34], "shadowSize": [37, 34], "iconAnchor": [9, 34], "infoWindowAnchor": [9, 2] } }, { "longitude": "41.682317", "latitude": "-71.460121", "show": "", "html": "Rhode Island", "icon": { "image": "http://www.google.com/mapfiles/markerB.png", "shadow": "http://www.google.com/mapfiles/shadow50.png", "iconSize": [20, 34], "shadowSize": [37, 34], "iconAnchor": [9, 34], "infoWindowAnchor": [9, 2] } }, { "longitude": "37.794128", "latitude": "-122.414582", "show": "", "html": "San Francisco", "icon": { "image": "http://www.google.com/mapfiles/markerC.png", "shadow": "http://www.google.com/mapfiles/shadow50.png", "iconSize": [20, 34], "shadowSize": [37, 34], "iconAnchor": [9, 34], "infoWindowAnchor": [9, 2] } } ]

icon:

The icon option is an JSON object which has the following properties:

• image : (string) The URL of the marker image.
• shadow : (string) The URL of the marker shadow image.
• iconSize : (array) The [width, height] of the marker.
• shadowSize : (array) The [width, height] of the marker shadow.
• iconAnchor : (array) The pixel coordinate (relative to the top left corner of the marker) at which the marker is anchored to the map.
• infoWindowAnchor : (array) The pixel coordinate (relative to the top left corner of the marker) at which the Info Window is anchored to the marker.

Example (default style):

{ "image": "http://www.google.com/mapfiles/marker.png", "shadow": "http://www.google.com/mapfiles/shadow50.png", "iconSize": [20, 34], "shadowSize": [37, 34], "iconAnchor": [9, 34], "infoWindowAnchor": [9, 2] }

Release Notes

• 0.1 : Initial release.

Contact Me

Please contact me (beaudet.alex [at] Google's mail service) if you have any suggestions or comments.

Thanks

Thanks to David Chan (http://www.davidchan.com) for his help and input. Also, the data structure used is similar to (and inspired by) gMap (http://gmap.nurtext.de), a great jQuery plugin written by Cedric Kastner.

Screenshots

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.