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"> 2. use map tag, and optionally, marker, and shape tags
<map style="display:block;height:300px" />
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. 1. map 2. marker 3. shape 4. info-window 5. marker-cluster
It is used as a tag or an attribute.
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/longitude i.e. center="[40.79,-54,18]", center="toronto, canada" |
| geo-fallback-center | latitude/longitude Coordinates to be loaded when no center is defined and retrieving current location fails i.e. geoFallbackCenter="[40.79,-54,18]" |
| ANY OPTIONS | As Documented It requires minimum two options, center and zoom. You can specify all map options as attributes. i.e. zoom="11" center="[40.74, -74.18]"
zoom-control="true"
zoom-control-options='{style:"small",position:"bottom_left"}'
map-type-control="true"
overview-map-control="true"
overview-map-control-options="{opened:true}"
pan-control="true"
pan-control-options='{position:"left_center"}'
rotate-control="true"
rotate-control-options='{position:"right_center"}'
scale-control="true"
scale-control-options='{position:"bottom_right", style:"default"}'
street-view-control="true
street-view-control-options='{position:"right_center"}'
|
| EVENTS | You can also specify any map events as an attribute.
i.e. on-click="myfunc" on-click="getRadius()" |
For usage of map controls, please refer to this example.
Map Examples
It is used as a tag or an attribute.
| 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] |
| ANY OPTIONS |
As Documented
It reqires `position` as an attribute. You can list <marker options as attribute of marker tag i.e. position="[40.76, -74.16]"
title="Hello Marker"
animation="Animation.BOUNCE"
draggable="true"
visible="true"
icon="beachflag.png"
|
| EVENTS | You can also specify any marker events i.e. on-click="myfunc" |
Marker Examples
It is used as a tag or an attribute.
| Attribute | Description |
|---|---|
| name | Required, The name of the shape i.e `polygon`, `image`, `polyline`, or `circle` |
| id | Optinal, Used for programming purpose. i.e. $scope.shapes.myCircle |
| ANY SHAPE OPTIONS |
You can specify any options as attribute that are specified in documentation following;
To see the full list of options of a shape for attributes, please visit the documentation. i.e. position="[40.76, -74.16]"
title="Hello Marker"
animation="Animation.BOUNCE"
draggable="true"
visible="true"
icon="beachflag.png"
|
| ANY SHAPE EVENTS |
You can also specify any shape options with the prefix of `on-` - polygon events - polyline events - image events - circle events |
Shape Examples
It is used as a tag or an attribute
| Attribute | Description |
|---|---|
| ANY OPTION | Optional, Any InfoWindow options |
| ANY EVENT | Optional, Any InfoWindow events |
Example:
<map center="[40.74, -74.18]">
<marker position="the cn tower" on-click="showInfoWindow(event, 'marker-info'"></marker>
<info-window id="marker-info" style="display: none;">
<h1> I am an InfoWindow </h1>
I am here at [[this.getPosition()]]
</info-window>
</map>
For working example,
please visit: https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/marker_with_info_window.html
| Attribute | Description |
|---|---|
| markers | Required, the initial markers for this marker clusterer The properties of each marker must be exactly the same as options of marker directive. The markers are also will be set to `$scope.markers` |
| ANY OPTION | Any MarkerClusterer options |
Example:
<map zoom="1" center="[43.6650000, -79.4103000]">
<marker-clusterer markers="markersData" max-zoom="2">
</marker-clusterer>
For full working example,
please visit https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/marker_clusterer.html