GoogleMap AngularJS Directive

Demo
Documentation
Road Trip By StreetView
NEW Maps Can Talk | Custom Marker

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

Everything in tag and attributes.
Thus, basic users don't even have to know what Javascript is.
Expose all original Google Maps V3 api to the user.
No hiding, no wraping, 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

Include ng-map.min.js as well as google maps.
<script src="http://maps.google.com/maps/api/js"></script>
name angular app as ngMap, or add it as a dependency

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

After map is initialized, you will have one event and map instances

Event:

mapInitialized with parameter with map

In case your map directive scope is different from your controller scope, use this event to get the map instance.

  app.controller('parentParentController', function($scope) {
    $scope.$on('mapInitialized', function(event, map) {
      map.setCenter( .... )
      ..
    });
  });

Instances:

$scope.map
$scope.map.markers
$scope.map.shapes
etc

Lazy Loading

Simply wrap the map tag with map-lazy-load="http://maps.google.com/maps/api/js".

<div map-lazy-load="http://maps.google.com/maps/api/js">
  <map center="41,-87" zoom="3"></map>
</div>

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="http://maps.google.com/maps/api/js?v=3.20&client=XXXXenter-api-keyXXXX";). 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="http://maps.google.com/maps/api/js"
      map-lazy-load-params="{{googleMapsUrl}}">
  <map center="41,-87" zoom="3"></map>
</div>

Directives

bicycling-layer
cloud-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
weather-layer

Advanced Examples

Contributors

Contributing

Clone the repository from github
Change to the folder dowloaded
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 cleanup the repository from a previous build ? does this work ?
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 testapp-server will start a web server for the testapp on http://localhost:8888

Release Notes

1.13.0

New directive custom-marker

1.12.0

Refactored documentation with angular-jsdoc

1.10.0

Added an event objectChanged to broadcast change of objects in map. e.g., markers, shapes, etc

1.9.0

Refactored directory structure

1.7.0

added directions directive Example
added places-auto-complete for input tag. Example

1.6.0

added street-view-panorama directive with its examples; street view with marker and street view in its own container

1.5.0

added geo-callback attribute for map, marker, shape, and info-window. Example

1.4.0

support lazy loading of maps js with directive, map-lazy-load, which does not require to https://maps.google.com/maps/api/js Example

1.3.0

added drawing-manager directive. Thanks to Fangming Du Example

1.2.0

events with controller as syntax, thanks to Simon

1.1.0

marker directive can have icon attribute as JSON
map with init-event attribute for initialization by an event

1.0.0 (covers All official google maps v3 examples using directives).

license

MIT License

sujitkinage/angularjs-google-maps