Code Monkey home page Code Monkey logo

angular-gm's Introduction

AngularGM

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

Example Plunkers

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)

Documentation and Examples

Quick Start

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="//dylanfprice.github.com/angular-gm/angular-gm-0.1.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" 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

Pull Requests welcome!

Author

Dylan Price (http://github.com/dylanfprice)

Credits

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

Changelog

v0.1.1

  • 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.

angular-gm's People

Contributors

646b avatar dylanfprice avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.