AngularGM is a set of directives for embedding Google Maps in your application using the Google Maps Javascript API.
- Bi-directional association of map bounds, center, and zoom with scope variables
- Multiple Google Maps can be embedded in the same page
- Works with ngView and reuses map instances so there is no memory leak
- Bind custom objects to markers
- Listen for and generate events on markers/objects
- Create InfoWindows which compile Angular expressions (credit goes to ui-map for this feature)
- Create polylines
Include the required libraries
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="//angulargm.herokuapp.com/angular-gm-0.3.1.min.js"></script>
Declare a dependency on the AngularGM
module
var app = angular.module('myModule', ['AngularGM']);
Make a map
<gm-map gm-map-id="'myMap'" gm-center="center" gm-zoom="zoom" gm-bounds="bounds" gm-map-type-id="mapTypeId" style="width:500px;height:500px;"></gm-map>
There is also now the option to install through Bower: bower install AngularGM
Clone the repo, git clone git://github.com/dylanfprice/angular-gm.git
AngularGM is tested with karma
$ sudo npm install grunt-cli --global
$ npm install
$ grunt karma:server
You can build the latest version using grunt
.
$ grunt build
You can also view the latest documentation on your local machine.
$ grunt docular-server
Pull Requests welcome!
Dylan Price ([email protected], http://github.com/dylanfprice)
Inspired by Nicolas Laplante's angular-google-maps directive (http://github.com/nlaplante/angular-google-maps)
README and project layout stolen from Olivier Louvignes' AngularStrap repo (http://github.com/mgcrea/angular-strap)
Much of the gmInfoWindow directive code is from the ui-map project
Note these are not comprehensive commit lists but represent what I consider the
most significant changes. You can always see a full changelog with git log v0.2.0..v0.1.1
.
- view commit • Guard angulargmDefaults in a function so it only gets run if AngularGM is loaded.
- view commit • [Polylines] Init polylines directive
- view commit • Generate docs based on angulargm version.
- view commit • Fixes #10. Allow configuring precision.
- view commit • Adding travis build config.
- view commit • Added travis build status to README.
- view commit • getEventHandlers should convert camelcase to underscored event names
- view commit • turns out Google Maps can have more than one listener on an event, so keep track of all of them instead of removing earlier listeners
- AngularGM documentation is now being generated using Docular. You can still view the old docs, as well as find the old docs and builds in the gh-pages branch.
- view commit • Add option override the Marker constructor.
- view commit • Fixes #4. Map options reset when angulargmMapController is re-instantiated.
- view commit • Added mapTypeId to gmMap.
- view commit • Updated testing config for latest version
- view commit • Versioned devDependencies.
- view commit • Switched documentation to docular.
- view commit • Removed jsdoc.
- view commit • Script for pushing docs and builds to heroku.
- view commit • Need to trigger resize at end of gmMap so markers will be redrawn.
- If you use the getMapPromise method of angulargmContainer, you may want to make sure your configuration is in a run function. If you do configuration in a controller it will get re-run on the same map instance every time the controller is re-instantiated.
- view commit • Added gmMapResize event to gmMap.
- view commit • Make gmMarkersRedraw event more flexible.
- view commit • Fixes #3. Reuse google map instances.
- view commit • Update to angular 1.0.7.