AngularGM

AngularGM is a set of directives for embedding Google Maps in your application using the Google Maps Javascript API.

Latest version: 2.0.1

Features

• 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 and circles

Documentation and Examples

• Documentation
• Examples

Quick Start

Install angular-gm

• Bower: bower install AngularGM
• npm: npm install angular-gm

Include the required libraries

<script src="//maps.googleapis.com/maps/api/js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="//path/to/angular-gm.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>

Development

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 && grunt connect

then go to http://localhost:8000/dist/docs/

Pull Requests welcome!

Author

Dylan Price ([email protected], http://github.com/dylanfprice)

Credits

Inspired by Nicolas Laplante's angular-google-maps directive (nlaplante/angular-google-maps)

README and project layout stolen from Olivier Louvignes' AngularStrap repo (mgcrea/angular-strap)

Much of the gmInfoWindow directive code is from the ui-map project

Changelog

Moved to CHANGELOG.md