There is already one for this. However, I found myself doing totally different approach for this purpose than the existing one, such as;
-
Everything in tag and attributes
Therefore, basic users does not even have to know what Javascript is. Tag does it all. -
Expose the original Google Maps V3 api
By doing so, programmers don't need to learn this module.
There is a blog that introduces this module.
The title of it is 'Google Map As The Simplest Way'
- include ng-map.js or ng-map.min.js and ngMap module to be active.
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="http://code.angularjs.org/1.2.5/angular.js"></script> <script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
-
name angular app as ngMap, or add it as a dependency
<html ng-app="ngMap"> -
use
maptag, and optionally,marker, andshapetags<map style="display:block;height:300px" />
- All Examples
- Hello Map
- Markers
- [Dynamic Markers] (https://rawgithub.amrom.workers.dev/allenhwkim/angularjs-google-maps/master/build/dynamic_markers.html)
- My Address
- Where am I?
- Controls
- Map Options
- Shapes(Rectangle, Triangle, Image)
- Events
- Bird Eyes View/Street View
- Multiple Maps On A Page
- Street View
- Marker Clusterer
- Starbucks World Wide
To use it in your app, please include 'ngMap' as dependency.
var myApp = angular.module('myApp', ['ngMap']);
<html ng-app="myApp">
You will also have these three scope variables after these directives are initialized.
- $scope.map
- $scope.markers as a hash
- $scope.shapes as a hash
- $scope.infoWindow as a hash
- $scope.markerCluster as a hash
In case your map directive scope is different from your controller scope, there are event emitted when each is initialized. There are three events emitted;
mapInitializedmarkersInitializedshpaesInitializedinfoWindowInitializedmarkerClusterInitialized
Example Usage:
app.controller('parentParentController', function($scope) {
$scope.$on('mapInitialized', function(event, map) {
map.setCenter( .... )
..
});
});
There are five directives defined with ng-map module.
- map
- marker
- shape
- info-window
- marker-cluster
As documented, it requires minimum two options, center and zoom. You can specify all map options as attributes.
These are attributes of map tag which is EXACTLY the same as the documentation except the following for the convenience
| Attributes | Description |
|---|---|
| center | address or latitude/langitude i.e. center="[40.79,-54,18]", center="toronto, canada" |
| EVENTS | You can also specify any map events as an attribute.
i.e. on-click="myfunc" |
For usage of map controls, please refer to this example.
As documented, it reqires position as an attribute.
You can list any maker options as attribute of marker tag
These are attributes of marker tag which ate EXACTLY the same as the documentation except the following for the convenienece.
| Attribute | Description |
|---|---|
| id | Used for programming purpose. i.e. $scope.markers.myId |
| position |
'current', address, or latitude/longitude i.e. 'current location', 'current position', 'Toronto, Canada', or [40.74, -74.18] |
| EVENTS | You can also specify any marker events i.e. on-click="myfunc" |
shape tag always requires name attribute
-
name (the name of shape)
i.e.polygon,image,polyline, orcircle. -
optionally, you can provide
idfor programming purpose. i.e. $scope.shapes.myCircle
All other attributes are based on the name you specified.
To see the full list of options of a shape for attributes, please visit the documentation.