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 and attribute does it all.
- Expose all Original Google Maps V3 api to the user through this directive. No hiding, no wraping, or whatsoever. By doing so, programmers don't need to learn this module again for AngularJS Google Map. 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'
For Bower users,
$ bower install ngMap
-
Include
ng-map.min.jsas well as google maps.
<script src="http://maps.google.com/maps/api/js?sensor=false"></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" />
To use it in your app, please include 'ngMap' as dependency.
<script>
var myApp = angular.module('myApp', ['ngMap']);
</script>
<div ng-app="myApp">
...
</div>
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