Atlas Demo

Default Atlas Instance

Atlas Instance with Options

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

• 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. Example: 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. This 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.