[r1-dev] supporting labels on markers directive

dist/angular-google-maps.js

@@ -362,6 +362,9 @@
     return this.GmapUtil = {
       getLabelPositionPoint: function(anchor) {
         var xPos, yPos;
+        if (anchor === void 0) {
+          return void 0;
+        }
         anchor = /^([\d\.]+)\s([\d\.]+)$/.exec(anchor);
         xPos = anchor[1];
         yPos = anchor[2];
@@ -507,8 +510,6 @@
           return self.markerLabel.setMap(theMap);
         });
         this.marker.setMap(this.marker.getMap());
-        this.$log = directives.api.utils.Logger;
-        this.$log.info(this);
       }
 
       MarkerLabelChildModel.prototype.getSharedCross = function(crossUrl) {
@@ -576,36 +577,43 @@
       MarkerChildModel.include(directives.api.utils.GmapUtil);
 
       function MarkerChildModel(index, model, parentScope, gMap, $timeout, defaults, doClick, gMarkerManager) {
+        var self,
+          _this = this;
+        this.index = index;
+        this.model = model;
+        this.parentScope = parentScope;
+        this.gMap = gMap;
+        this.defaults = defaults;
+        this.doClick = doClick;
+        this.gMarkerManager = gMarkerManager;
         this.watchDestroy = __bind(this.watchDestroy, this);
+        this.setLabelOptions = __bind(this.setLabelOptions, this);
+        this.isLabelDefined = __bind(this.isLabelDefined, this);
         this.setOptions = __bind(this.setOptions, this);
         this.setIcon = __bind(this.setIcon, this);
         this.setCoords = __bind(this.setCoords, this);
         this.destroy = __bind(this.destroy, this);
         this.maybeSetScopeValue = __bind(this.maybeSetScopeValue, this);
         this.createMarker = __bind(this.createMarker, this);
         this.setMyScope = __bind(this.setMyScope, this);
-        var _this = this;
-        this.index = index;
-        this.gMarkerManager = gMarkerManager;
-        this.model = model;
-        this.defaults = defaults;
-        this.parentScope = parentScope;
-        this.iconKey = parentScope.icon;
-        this.coordsKey = parentScope.coords;
-        this.clickKey = parentScope.click();
-        this.optionsKey = parentScope.options;
-        this.myScope = parentScope.$new(false);
-        this.myScope.model = model;
-        this.gMap = gMap;
-        this.setMyScope(model, void 0, true);
-        this.createMarker(model);
-        this.doClick = doClick;
-        this.$log = directives.api.utils.Logger;
+        self = this;
+        this.iconKey = this.parentScope.icon;
+        this.coordsKey = this.parentScope.coords;
+        this.clickKey = this.parentScope.click();
+        this.labelContentKey = this.parentScope.labelContent;
+        this.optionsKey = this.parentScope.options;
+        this.labelOptionsKey = this.parentScope.labelOptions;
+        this.myScope = this.parentScope.$new(false);
+        this.myScope.model = this.model;
+        this.setMyScope(this.model, void 0, true);
+        this.createMarker(this.model);
         this.myScope.$watch('model', function(newValue, oldValue) {
           if (newValue !== oldValue) {
             return _this.setMyScope(newValue, oldValue);
           }
         }, true);
+        this.$log = directives.api.utils.Logger;
+        this.$log.info(self);
         this.watchDestroy(this.myScope);
       }
 
@@ -618,6 +626,7 @@
         }
         this.maybeSetScopeValue('icon', model, oldModel, this.iconKey, this.evalModelHandle, isInit, this.setIcon);
         this.maybeSetScopeValue('coords', model, oldModel, this.coordsKey, this.evalModelHandle, isInit, this.setCoords);
+        this.maybeSetScopeValue('labelContent', model, oldModel, this.labelContentKey, this.evalModelHandle, isInit);
         this.maybeSetScopeValue('click', model, oldModel, this.clickKey, this.evalModelHandle, isInit);
         return this.createMarker(model, oldModel, isInit);
       };
@@ -726,7 +735,11 @@
         }
         this.opts = this.createMarkerOptions(scope.coords, scope.icon, scope.options);
         delete this.gMarker;
-        this.gMarker = new google.maps.Marker(this.opts);
+        if (this.isLabelDefined(scope)) {
+          this.gMarker = new MarkerWithLabel(this.setLabelOptions(this.opts, scope));
+        } else {
+          this.gMarker = new google.maps.Marker(this.opts);
+        }
         this.gMarkerManager.add(this.gMarker);
         return google.maps.event.addListener(this.gMarker, 'click', function() {
           if (_this.doClick && (_this.myScope.click != null)) {
@@ -735,6 +748,17 @@
         });
       };
 
+      MarkerChildModel.prototype.isLabelDefined = function(scope) {
+        return scope.labelContent != null;
+      };
+
+      MarkerChildModel.prototype.setLabelOptions = function(opts, scope) {
+        opts.labelAnchor = this.getLabelPositionPoint(scope.labelAnchor);
+        opts.labelClass = scope.labelClass;
+        opts.labelContent = scope.labelContent;
+        return opts;
+      };
+
       MarkerChildModel.prototype.watchDestroy = function(scope) {
         var _this = this;
         return scope.$on("$destroy", function() {
@@ -1916,6 +1940,9 @@ not 1:1 in this setting.
         this.scope.doCluster = '=docluster';
         this.scope.clusterOptions = '=clusteroptions';
         this.scope.fit = '=fit';
+        this.scope.labelContent = '=labelcontent';
+        this.scope.labelAnchor = '@labelanchor';
+        this.scope.labelClass = '@labelclass';
         this.$timeout = $timeout;
         this.$log.info(this);
       }

example/example-controller.js

@@ -17,20 +17,24 @@ function ExampleController ($scope, $timeout, $log) {
     genRandomMarkers = function(numberOfMarkers,scope){
         markers = []
         for(var i=0; i < numberOfMarkers; i++){
-            markers.push(createRandomMarker(scope.map.bounds))
+            markers.push(createRandomMarker(i, scope.map.bounds))
         }
         scope.map.randomMarkers = markers;
     };
 
-    createRandomMarker = function(bounds) {
+    createRandomMarker = function(i, bounds) {
       var lat_min = bounds.southwest.latitude,
           lat_range = bounds.northeast.latitude - lat_min,
           lng_min = bounds.southwest.longitude,
           lng_range = bounds.northeast.longitude - lng_min;
 
         latitude = lat_min + (Math.random() * lat_range);
         longitude = lng_min + (Math.random() * lng_range);
-        return {latitude:latitude,longitude:longitude};
+        return {
+            latitude: latitude,
+            longitude: longitude,
+            title: 'm' + i
+        };
     };
 
     angular.extend($scope, {
@@ -74,18 +78,21 @@ function ExampleController ($scope, $timeout, $log) {
                 {
                     latitude: 46,
                     longitude: -77,
-                    showWindow: false
+                    showWindow: false,
+                    title: '[46,-77]'
                 },
                 {
                     latitude: 33,
                     longitude: -77,
-                    showWindow: false
+                    showWindow: false,
+                    title: '[33,-77]'
                 },
                 {
                     icon: 'plane.png',
                     latitude: 35,
                     longitude: -125,
-                    showWindow: false
+                    showWindow: false,
+                    title: '[35,-125]'
                 }
             ],
             dynamicMarkers: [],

example/example.css

@@ -37,7 +37,7 @@ body {
     font-weight: bold;
     text-align: center;
     width: 40px;
-    border: 2px solid black;
+    border: 1px solid black;
     white-space: nowrap;
 }
 

example/example.html

@@ -47,13 +47,14 @@ <h1>angular-google-maps example</h1>
         <layer type="BicyclingLayer" show="map.showBicycling"></layer>
         <layer namespace="weather" type="WeatherLayer" show="map.showWeather"></layer>
 
-        <marker coords="searchLocation">
-        </marker>
+        <marker coords="searchLocation"/>
+
         <markers models="map.randomMarkers" coords="'self'" icon="'icon'" click="'onClicked'"
-                 doCluster="map.doClusterRandomMarkers" clusterOptions="map.clusterOptions">
+                    doCluster="map.doClusterRandomMarkers" clusterOptions="map.clusterOptions">
         </markers>
-
-        <markers models="map.markers2" coords="'self'" icon="'icon'" click="'onClicked'">
+
+        <markers models="map.markers2" coords="'self'" icon="'icon'" click="'onClicked'" 
+                    labelContent="'title'" labelAnchor="22 0" labelClass="marker-labels">
             <windows show="'showWindow'" closeClick="'closeClick'">
                 <p ng-non-bindable>This is an info window at {{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>
 
@@ -114,24 +115,6 @@ <h1>angular-google-maps example</h1>
     <fieldset>
         <table class="table">
             <tbody>
-            <tr>
-                <td>
-                    <ul>
-                        <li class="dropdown">
-                            <a class="dropdown-toggle"
-                               data-toggle="dropdown"
-                               href="#">
-                                Products
-                                <b class="caret"></b>
-                            </a>
-                            <ul class="dropdown-menu">
-                                <li><a href="#">Consumer</a></li>
-                                <li><a href="#>">Broadcast</a></li>
-                            </ul>
-
-                    </ul>
-                </td>
-            </tr>
             <tr>
                 <td>
                     <strong>Layers</strong>

src/coffee/directives/api/markers.coffee

@@ -15,10 +15,15 @@ not 1:1 in this setting.
 			super($timeout)
 			self = @
 			@template = '<span class="angular-google-map-markers" ng-transclude></span>'
+
 			@scope.models = '=models'
 			@scope.doCluster= '=docluster'
 			@scope.clusterOptions= '=clusteroptions'
 			@scope.fit= '=fit'
+			@scope.labelContent= '=labelcontent'
+			@scope.labelAnchor= '@labelanchor'
+			@scope.labelClass= '@labelclass'
+
 			@$timeout = $timeout
 			@$log.info(@)
 

src/coffee/directives/api/models/child/label-child-model.coffee

@@ -4,6 +4,7 @@
 		constructor: (gMarker,opt_options) ->
 			super()
 			self = @
+
 			@marker = gMarker
 			@marker.set("labelContent" , opt_options.labelContent)
 			@marker.set("labelAnchor" , @getLabelPositionPoint( opt_options.labelAnchor ))
@@ -39,8 +40,6 @@
 
 			@marker.setMap( @marker.getMap() )
 
-			@$log = directives.api.utils.Logger
-			@$log.info(@)
 		getSharedCross:(crossUrl)=>
 			@markerLabel.getSharedCross(crossUrl)
 		setTitle:()=>

src/coffee/directives/api/models/child/marker-child-model.coffee

@@ -1,33 +1,34 @@
 @ngGmapModule "directives.api.models.child", ->
 	class @MarkerChildModel extends oo.BaseObject
 		@include directives.api.utils.GmapUtil
-		constructor:(index,model,parentScope,gMap,$timeout,defaults,doClick,gMarkerManager)->
-			@index = index
-			@gMarkerManager = gMarkerManager
-			@model = model
-			@defaults = defaults
-			@parentScope = parentScope
-			@iconKey = parentScope.icon
-			@coordsKey = parentScope.coords
-			@clickKey = parentScope.click()
-			@optionsKey = parentScope.options
-			@myScope = parentScope.$new(false)
-			@myScope.model = model
-			@gMap = gMap
-			@setMyScope(model,undefined,true)
-			@createMarker(model)
-			@doClick = doClick
-			@$log = directives.api.utils.Logger
+		constructor:(@index, @model, @parentScope, @gMap, $timeout, @defaults, @doClick, @gMarkerManager)->
+			self = @
+
+			@iconKey = @parentScope.icon
+			@coordsKey = @parentScope.coords
+			@clickKey = @parentScope.click()
+			@labelContentKey = @parentScope.labelContent
+			@optionsKey = @parentScope.options
+			@labelOptionsKey = @parentScope.labelOptions
+			@myScope = @parentScope.$new(false)
+
+			@myScope.model = @model
+			@setMyScope(@model, undefined, true)
+			@createMarker(@model)
+
 			@myScope.$watch('model',(newValue, oldValue) =>
 				if (newValue != oldValue)
 					@setMyScope(newValue,oldValue) 
 			,true)
 
+			@$log = directives.api.utils.Logger
+			@$log.info(self)
 			@watchDestroy(@myScope)
 
 		setMyScope:(model, oldModel = undefined,isInit = false) =>
 			@maybeSetScopeValue('icon',model,oldModel,@iconKey,@evalModelHandle,isInit,@setIcon)
 			@maybeSetScopeValue('coords',model,oldModel,@coordsKey,@evalModelHandle,isInit,@setCoords)
+			@maybeSetScopeValue('labelContent',model,oldModel,@labelContentKey,@evalModelHandle,isInit)
 			@maybeSetScopeValue('click',model,oldModel,@clickKey,@evalModelHandle,isInit)
 			@createMarker(model,oldModel,isInit)		
 
@@ -71,7 +72,7 @@
 		setCoords:(scope) =>
 			if(scope.$id != @myScope.$id or @gMarker == undefined)
 				return
-			if (scope.coords?) 
+			if (scope.coords?)
 				@gMarker.setPosition(new google.maps.LatLng(scope.coords.latitude, scope.coords.longitude))
 				@gMarker.setVisible(scope.coords.latitude? and scope.coords.longitude?)
 				@gMarkerManager.remove(@gMarker)
@@ -97,15 +98,29 @@
 				delete @gMarker		
 			unless scope.coords ? scope.icon? scope.options?
 				return
-			@opts = @createMarkerOptions(scope.coords,scope.icon,scope.options)
+			@opts = @createMarkerOptions(scope.coords, scope.icon, scope.options)
+
 			delete @gMarker
-			@gMarker = new google.maps.Marker(@opts)
+			if @isLabelDefined(scope)
+				@gMarker = new MarkerWithLabel(@setLabelOptions(@opts, scope))
+			else
+				@gMarker = new google.maps.Marker(@opts)	
+
 			@gMarkerManager.add(@gMarker)
 			google.maps.event.addListener(@gMarker, 'click', =>
 				if @doClick and @myScope.click?
 					@myScope.click()
 			)
 
+		isLabelDefined:(scope) =>
+			scope.labelContent?
+
+		setLabelOptions:(opts, scope) =>
+			opts.labelAnchor= @getLabelPositionPoint(scope.labelAnchor)
+			opts.labelClass= scope.labelClass
+			opts.labelContent= scope.labelContent
+			opts
+
 		watchDestroy:(scope)=>
 			scope.$on("$destroy", => 
 				if @gMarker? #this is possible due to AsyncProcessor in that we created some Children but no gMarker yet