Angularjs Google Maps

The Simplest AngularJS Google Maps V3 Directive
Alternatives To Angularjs Google Maps
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Angularjs Google Maps1,568173103 years ago66November 25, 201886mitHTML
The Simplest AngularJS Google Maps V3 Directive
Angular Recaptcha5016372 years ago19July 30, 201878mitJavaScript
AngularJS directive to add a reCaptcha widget to your form
Angularjs Cart288
10 years ago5apache-2.0JavaScript
AngularJS Shopping Cart modified to support Stripe.js (includes Google Wallet and Paypal already) support
Angular Google Places Autocomplete2611013 years ago3September 08, 201685mitJavaScript
Pure AngularJS directive for Google Places Autocomplete
Angular Gm205
6 years ago3January 05, 20173mitJavaScript
AngularJS Google Maps Directives
Angular Google Gapi1741026 years ago6November 14, 201618JavaScript
An AngularJS module for using all Google Apis and your Google Cloud Endpoints (Google App Engine) with OAuth. This module uses Google APIs Client Library for JavaScript, available for all GApis.
4 years ago8mitJavaScript
AngularJS Learning Playground ( with Twitter bootstrap, Google maps API, TDD using Karma runner )
Angular Directive.g Signin148
525 years agoJune 29, 201517JavaScript
:triangular_ruler: AngularJS Directive for Google Plus Sign-in Button
7 years ago4JavaScript
AngularJS seed for Google Closure Compiler
Angular Google Maps Native94
47 years ago5August 10, 20155JavaScript
AngularJS directives for the Google Maps Javascript API using the native way
Alternatives To Angularjs Google Maps
Select To Compare

Alternative Project Comparisons

Google Maps AngularJS Directive

Road Trip By StreetView
Maps Can Talk | Custom Marker

If you like this, you also may like these:


There is already one for this. However, I found myself taking a totally different approach than the existing one, such as:

  1. Everything in tag and attributes.
    Thus, users don't even need knowledge of JavaScript.

  2. Expose all original Google Maps V3 API to the user.
    No hiding, no wrapping or whatsoever. By doing so, programmers don't need to learn how to use this module. You only need to know Google Maps V3 API.

There is a blog that introduces this module. The title of it is 'Google Map As The Simplest Way'

To get started

For Bower users,

$ bower install ngmap

  1. Include ng-map.min.js: <script src="/bower_components/ngmap/build/scripts/ng-map.min.js"></script>

  2. Include Google Maps:
    <script src=""></script>

  3. Name your AngularJS app ngMap, or add it as a dependency

    var myApp = angular.module('myApp', ['ngMap']);

To get the map instance use the NgMap.getMap() function

app.controller('MyController', function(NgMap) {
  NgMap.getMap().then(function(map) {
    console.log('markers', map.markers);
    console.log('shapes', map.shapes);

For npm users,

$ npm install ngmap

For Meteor users:

Lazy loading of Google Maps JavaScript

Simply wrap the map tag with map-lazy-load="".

<div map-lazy-load="">
  <ng-map center="41,-87" zoom="3"></ng-map>

If you need to pass in an API key to the javascript, you can set a scope variable in your controller (e.g. $scope.googleMapsUrl="";). This can be set from a constant value in your app to standardise the API key to pass to google for multiple controllers.

<div map-lazy-load=""
  <ng-map center="41,-87" zoom="3"></ng-map>


Grey area in Google Maps

The usual reason why this happens is that the size of the map is changed after the map has been initialized. If you for some reason change the size of the div, you need to trigger the "resize" event and possible recenter the map.

 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");


Check if a marker is within Map, Rectangle, or Circle


Calculate distance between two position

You can check this out: As you see, DistanceMatrix does not require map nor directive.

Another way to do this, is to use directions directive. As you see it here:, you have access to DirectionsRenderer by using map.directionsRenderers[id]

You use getDirections() or directions, then calculate the distance from there. e.g.,

Distance: {{ map.directionsRenderers[0].directions.routes[0].legs[0].distance }}


  • bicycling-layer
  • custom-control
  • custom-marker (NEW)
  • directions (NEW)
  • drawing-manager (NEW)
  • dynamic-maps-engine-layer
  • fusion-tables-layer
  • heatmap-layer
  • info-window
  • kml-layer
  • map
  • map-data
  • map-lazy-load (NEW)
  • map-type
  • map_controller
  • maps-engine-layer
  • marker
  • overlay-map-type
  • places-auto-complete
  • shape
  • street-view-panorama (NEW)
  • traffic-layer
  • transit-layer

Advanced examples



  • Clone the repository from GitHub.
  • Change to the cloned directory.
  • npm install to install the build tools
  • gulp build to build the JavaScript & doc files in the /build folder & run the unit tests.
  • gulp clean to clean up the repository by removing files and folders from previous build.
  • gulp test to run the Karma unit test suite.
  • gulp test:e2e to run the Protractor test suite. For the first test run, you may need to update the protractor webdriver manager. It will show the command on screen if this is required (node_modules/gulp-protractor/node_modules/protractor/bin/webdriver-manager update).
  • gulp test:server will start a web server for the testapp on http://localhost:8888


MIT License

Popular Google Projects
Popular Angularjs Projects
Popular Companies Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Google Maps