Atlas (Map Interface) 0.2

Atlas is a very simple way to embed Google Maps into your webpage.

Screenshot



Details

Author
Alex Beaudet
Current version
0.2
GitHub
alexbeaudet/Atlas
Downloads
3275
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • core/1.2.4: '*'
    • more/1.2.4.2: [Utilities.Assets]

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.

blog comments powered by Disqus