Skip to content
This repository was archived by the owner on Nov 30, 2018. It is now read-only.

Commit 72c377f

Browse files
fwitzkefwitzke
committed
specifying label attributes on markers directive
1 parent ee4a2d2 commit 72c377f

File tree

8 files changed

+88
-208
lines changed

8 files changed

+88
-208
lines changed

‎dist/angular-google-maps.js

+37-172
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,9 @@
359359
return this.GmapUtil = {
360360
getLabelPositionPoint: function(anchor) {
361361
var xPos, yPos;
362+
if (anchor === void 0) {
363+
return void 0;
364+
}
362365
anchor = /^([\d\.]+)\s([\d\.]+)$/.exec(anchor);
363366
xPos = anchor[1];
364367
yPos = anchor[2];
@@ -558,6 +561,15 @@
558561
MarkerChildModel.include(directives.api.utils.GmapUtil);
559562

560563
function MarkerChildModel(index, model, parentScope, gMap, $timeout, defaults, doClick, gMarkerManager) {
564+
var self,
565+
_this = this;
566+
this.index = index;
567+
this.model = model;
568+
this.parentScope = parentScope;
569+
this.gMap = gMap;
570+
this.defaults = defaults;
571+
this.doClick = doClick;
572+
this.gMarkerManager = gMarkerManager;
561573
this.watchDestroy = __bind(this.watchDestroy, this);
562574
this.setOptions = __bind(this.setOptions, this);
563575
this.setIcon = __bind(this.setIcon, this);
@@ -566,28 +578,24 @@
566578
this.maybeSetScopeValue = __bind(this.maybeSetScopeValue, this);
567579
this.createMarker = __bind(this.createMarker, this);
568580
this.setMyScope = __bind(this.setMyScope, this);
569-
var _this = this;
570-
this.index = index;
571-
this.gMarkerManager = gMarkerManager;
572-
this.model = model;
573-
this.defaults = defaults;
574-
this.parentScope = parentScope;
575-
this.iconKey = parentScope.icon;
576-
this.coordsKey = parentScope.coords;
577-
this.clickKey = parentScope.click();
578-
this.optionsKey = parentScope.options;
579-
this.myScope = parentScope.$new(false);
580-
this.myScope.model = model;
581-
this.gMap = gMap;
582-
this.setMyScope(model, void 0, true);
583-
this.createMarker(model);
584-
this.doClick = doClick;
585-
this.$log = directives.api.utils.Logger;
581+
self = this;
582+
this.iconKey = this.parentScope.icon;
583+
this.coordsKey = this.parentScope.coords;
584+
this.clickKey = this.parentScope.click();
585+
this.labelContentKey = this.parentScope.labelContent;
586+
this.optionsKey = this.parentScope.options;
587+
this.labelOptionsKey = this.parentScope.labelOptions;
588+
this.myScope = this.parentScope.$new(false);
589+
this.myScope.model = this.model;
590+
this.setMyScope(this.model, void 0, true);
591+
this.createMarker(this.model);
586592
this.myScope.$watch('model', function(newValue, oldValue) {
587593
if (newValue !== oldValue) {
588594
return _this.setMyScope(newValue, oldValue);
589595
}
590596
}, true);
597+
this.$log = directives.api.utils.Logger;
598+
this.$log.info(self);
591599
this.watchDestroy(this.myScope);
592600
}
593601

@@ -600,6 +608,7 @@
600608
}
601609
this.maybeSetScopeValue('icon', model, oldModel, this.iconKey, this.evalModelHandle, isInit, this.setIcon);
602610
this.maybeSetScopeValue('coords', model, oldModel, this.coordsKey, this.evalModelHandle, isInit, this.setCoords);
611+
this.maybeSetScopeValue('labelContent', model, oldModel, this.labelContentKey, this.evalModelHandle, isInit);
603612
this.maybeSetScopeValue('click', model, oldModel, this.clickKey, this.evalModelHandle, isInit);
604613
return this.createMarker(model, oldModel, isInit);
605614
};
@@ -708,7 +717,14 @@
708717
}
709718
this.opts = this.createMarkerOptions(scope.coords, scope.icon, scope.options);
710719
delete this.gMarker;
711-
this.gMarker = new google.maps.Marker(this.opts);
720+
if (scope.labelContent != null) {
721+
this.opts.labelAnchor = this.getLabelPositionPoint(scope.labelAnchor);
722+
this.opts.labelClass = scope.labelClass;
723+
this.opts.labelContent = scope.labelContent;
724+
this.gMarker = new MarkerWithLabel(this.opts);
725+
} else {
726+
this.gMarker = new google.maps.Marker(this.opts);
727+
}
712728
this.gMarkerManager.add(this.gMarker);
713729
return google.maps.event.addListener(this.gMarker, 'click', function() {
714730
if (_this.doClick && (_this.myScope.click != null)) {
@@ -1163,85 +1179,6 @@
11631179

11641180
}).call(this);
11651181

1166-
(function() {
1167-
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
1168-
__hasProp = {}.hasOwnProperty,
1169-
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
1170-
1171-
this.ngGmapModule("directives.api.models.parent", function() {
1172-
return this.MarkersLabelsParentModel = (function(_super) {
1173-
__extends(MarkersLabelsParentModel, _super);
1174-
1175-
function MarkersLabelsParentModel(scope, element, attrs, ctrls, $timeout, $compile, $http, $templateCache, $interpolate) {
1176-
var self,
1177-
_this = this;
1178-
this.scope = scope;
1179-
this.element = element;
1180-
this.attrs = attrs;
1181-
this.ctrls = ctrls;
1182-
this.$timeout = $timeout;
1183-
this.$compile = $compile;
1184-
this.$http = $http;
1185-
this.$templateCache = $templateCache;
1186-
this.$interpolate = $interpolate;
1187-
this.watchForRebuild = __bind(this.watchForRebuild, this);
1188-
this.createChildMarkerLabels = __bind(this.createChildMarkerLabels, this);
1189-
self = this;
1190-
this.labels = [];
1191-
this.bigGulp = directives.api.utils.AsyncProcessor;
1192-
this.markersScope = this.ctrls[0].getMarkersScope();
1193-
this.$log = directives.api.utils.Logger;
1194-
this.$log.info(self);
1195-
this.$timeout(function() {
1196-
_this.createChildMarkerLabels();
1197-
return _this.watchForRebuild(_this.markersScope);
1198-
}, 50);
1199-
}
1200-
1201-
MarkersLabelsParentModel.prototype.createChildMarkerLabels = function() {
1202-
var _this = this;
1203-
return this.bigGulp.handleLargeArray(this.markersScope.markerModels, function(marker) {
1204-
var childScope, content_key, label;
1205-
childScope = _this.scope.$new(false);
1206-
/*
1207-
markers-labels directive will specify a content attribute which will used
1208-
as the label content. This attribute is expected to exist in the marker model
1209-
1210-
TODO: this is dirty, need a better way to handle this
1211-
*/
1212-
1213-
content_key = childScope.labelContent;
1214-
if (marker.model[content_key]) {
1215-
childScope.labelContent = marker.model[content_key];
1216-
label = new directives.api.models.child.MarkerLabelChildModel(marker.gMarker, childScope);
1217-
_this.labels.push(label);
1218-
return _this.scope.$on("$destroy", function() {
1219-
return label.destroy();
1220-
});
1221-
} else {
1222-
return _this.$log.info("marker content not specified: " + content_key);
1223-
}
1224-
}, (function() {}), function() {
1225-
return _this.scope.labelModels = _this.labels;
1226-
});
1227-
};
1228-
1229-
MarkersLabelsParentModel.prototype.watchForRebuild = function(scope) {
1230-
var _this = this;
1231-
return scope.$on('markersRebuild', function(event, data) {
1232-
_this.$log.info('### REBUILD');
1233-
_this.labels = [];
1234-
return _this.createChildMarkerLabels();
1235-
});
1236-
};
1237-
1238-
return MarkersLabelsParentModel;
1239-
1240-
})(oo.BaseObject);
1241-
});
1242-
1243-
}).call(this);
1244-
12451182
(function() {
12461183
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
12471184
__hasProp = {}.hasOwnProperty,
@@ -1313,7 +1250,6 @@
13131250
return _this.markersIndex++;
13141251
}, (function() {}), function() {
13151252
scope.markerModels = _this.markers;
1316-
scope.$broadcast('markersRebuild');
13171253
_this.gMarkerManager.draw();
13181254
if (angular.isDefined(_this.attrs.fit) && (scope.fit != null) && scope.fit) {
13191255
return _this.fit();
@@ -1836,37 +1772,6 @@
18361772

18371773
}).call(this);
18381774

1839-
(function() {
1840-
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
1841-
__hasProp = {}.hasOwnProperty,
1842-
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
1843-
1844-
this.ngGmapModule("directives.api", function() {
1845-
return this.Labels = (function(_super) {
1846-
__extends(Labels, _super);
1847-
1848-
function Labels($timeout) {
1849-
this.link = __bind(this.link, this);
1850-
var self;
1851-
Labels.__super__.constructor.call(this, $timeout);
1852-
self = this;
1853-
this.require = ['^markers'];
1854-
this.template = '<span class="angular-google-map-markers-labels" ng-transclude></span>';
1855-
this.scope.models = '=models';
1856-
this.$log.info(this);
1857-
}
1858-
1859-
Labels.prototype.link = function(scope, element, attrs, ctrl) {
1860-
return new directives.api.models.parent.MarkersLabelsParentModel(scope, element, attrs, ctrl, this.$timeout);
1861-
};
1862-
1863-
return Labels;
1864-
1865-
})(directives.api.ILabel);
1866-
});
1867-
1868-
}).call(this);
1869-
18701775
(function() {
18711776
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
18721777
__hasProp = {}.hasOwnProperty,
@@ -1979,6 +1884,9 @@ not 1:1 in this setting.
19791884
this.scope.doCluster = '=docluster';
19801885
this.scope.clusterOptions = '=clusteroptions';
19811886
this.scope.fit = '=fit';
1887+
this.scope.labelContent = '=labelcontent';
1888+
this.scope.labelAnchor = '@labelanchor';
1889+
this.scope.labelClass = '@labelclass';
19821890
this.$timeout = $timeout;
19831891
this.$log.info(this);
19841892
}
@@ -4866,49 +4774,6 @@ angular.module('google-maps').directive('markers', ['$timeout', function ($timeo
48664774
angular.module('google-maps').directive('markerLabel', ['$log', '$timeout', function ($log, $timeout) {
48674775
return new directives.api.Label($timeout);
48684776
}]);
4869-
;/**!
4870-
* The MIT License
4871-
*
4872-
* Copyright (c) 2010-2012 Google, Inc. http://angularjs.org
4873-
*
4874-
* Permission is hereby granted, free of charge, to any person obtaining a copy
4875-
* of this software and associated documentation files (the "Software"), to deal
4876-
* in the Software without restriction, including without limitation the rights
4877-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
4878-
* copies of the Software, and to permit persons to whom the Software is
4879-
* furnished to do so, subject to the following conditions:
4880-
*
4881-
* The above copyright notice and this permission notice shall be included in
4882-
* all copies or substantial portions of the Software.
4883-
*
4884-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
4885-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
4886-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
4887-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
4888-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
4889-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
4890-
* THE SOFTWARE.
4891-
*
4892-
* angular-google-maps
4893-
* https://github.com/nlaplante/angular-google-maps
4894-
*
4895-
* @authors Fernando Witzke, [email protected]
4896-
*/
4897-
4898-
/**
4899-
* Markers labels directive
4900-
*
4901-
* This directive is used to create marker labels for the markers directive
4902-
*
4903-
* {attribute content required} content of the label
4904-
* {attribute anchor required} string that contains the x and y point position of the label
4905-
* {attribute class optional} class to DOM object
4906-
* {attribute style optional} style for the label
4907-
*/
4908-
4909-
angular.module('google-maps').directive('markersLabels', ['$timeout', function ($timeout) {
4910-
return new directives.api.Labels($timeout);
4911-
}]);
49124777
;/**!
49134778
* The MIT License
49144779
*

‎dist/angular-google-maps.min.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/example-controller.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function ExampleController ($scope, $timeout, $log) {
3232
longitude = lng_min + (Math.random() * lng_range);
3333
return {
3434
latitude: latitude,
35-
longitude: longitude,
35+
longitude: longitude,
3636
title: 'm' + i
3737
};
3838
};
@@ -79,20 +79,20 @@ function ExampleController ($scope, $timeout, $log) {
7979
latitude: 46,
8080
longitude: -77,
8181
showWindow: false,
82-
title: '46, -77'
82+
title: '[46,-77]'
8383
},
8484
{
8585
latitude: 33,
8686
longitude: -77,
8787
showWindow: false,
88-
title: '33, -77'
88+
title: '[33,-77]'
8989
},
9090
{
9191
icon: 'plane.png',
9292
latitude: 35,
9393
longitude: -125,
9494
showWindow: false,
95-
title: 'plane'
95+
title: '[35,-125]'
9696
}
9797
],
9898
dynamicMarkers: [],

‎example/example.html

+6-7
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,19 @@ <h1>angular-google-maps example</h1>
4747
<layer type="BicyclingLayer" show="map.showBicycling"></layer>
4848
<layer namespace="weather" type="WeatherLayer" show="map.showWeather"></layer>
4949

50-
<marker coords="searchLocation">
51-
</marker>
50+
<marker coords="searchLocation"/>
51+
5252
<markers models="map.randomMarkers" coords="'self'" icon="'icon'" click="'onClicked'"
53-
doCluster="map.doClusterRandomMarkers" clusterOptions="map.clusterOptions">
54-
<markers-labels content="'title'" anchor="22 0" class="marker-labels"></markers-labels>
53+
doCluster="map.doClusterRandomMarkers" clusterOptions="map.clusterOptions">
5554
</markers>
56-
57-
<markers models="map.markers2" coords="'self'" icon="'icon'" click="'onClicked'">
55+
56+
<markers models="map.markers2" coords="'self'" icon="'icon'" click="'onClicked'"
57+
labelContent="'title'" labelAnchor="22 0" labelClass="marker-labels">
5858
<windows show="'showWindow'" closeClick="'closeClick'">
5959
<p ng-non-bindable>This is an info window at {{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>
6060

6161
<p class="muted">My marker will stay open when the window is popped up!</p>
6262
</windows>
63-
<markers-labels content="'title'" anchor="22 0" class="marker-labels"></markers-labels>
6463
</markers>
6564

6665

‎src/coffee/directives/api/markers.coffee

+5
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,15 @@ not 1:1 in this setting.
1515
super($timeout)
1616
self = @
1717
@template = '<span class="angular-google-map-markers" ng-transclude></span>'
18+
1819
@scope.models = '=models'
1920
@scope.doCluster= '=docluster'
2021
@scope.clusterOptions= '=clusteroptions'
2122
@scope.fit= '=fit'
23+
@scope.labelContent= '=labelcontent'
24+
@scope.labelAnchor= '@labelanchor'
25+
@scope.labelClass= '@labelclass'
26+
2227
@$timeout = $timeout
2328
@$log.info(@)
2429

0 commit comments

Comments
 (0)