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.
new Atlas(Element, [options])
• 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.
• 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]
}
0.1 : Initial release.
Please contact me (beaudet.alex [at] Google's mail service) if you have any suggestions or comments.
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.