Clusterer example, and fixed bug with MarkerParentModel.

Author: nmccready

example/example-controller.js

@@ -14,6 +14,25 @@ function ExampleController ($scope, $timeout, $log) {
         window.alert("Marker: lat: " + marker.latitude +", lon: " + marker.longitude + " clicked!!")
     };
 
+    genRandomMarkers = function(numberOfMarkers,scope){
+        markers = []
+        for(var i=0; i < numberOfMarkers; i++){
+            markers.push(createRandomMarker(scope.map.bounds))
+        }
+        scope.map.randomMarkers = markers;
+    };
+    
+    createRandomMarker = function(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};
+    };
+
     angular.extend($scope, {
         map: {
             showTraffic: true,
@@ -61,6 +80,7 @@ function ExampleController ($scope, $timeout, $log) {
                 }
             ],
             dynamicMarkers: [],
+            randomMarkers: [],
             clickedMarker: {
                 latitude: null,
                 longitude: null
@@ -193,9 +213,14 @@ function ExampleController ($scope, $timeout, $log) {
         $scope.map.markers.length = 0;
         $scope.map.markers2.length = 0;
         $scope.map.dynamicMarkers.length = 0;
+        $scope.map.randomMarkers.length = 0;
         $scope.map.clickedMarker = null;
     };
 
+    $scope.genRandomMarkers = function(numberOfMarkers) {
+        genRandomMarkers(numberOfMarkers,$scope);
+    }
+
     $scope.onMarkerClicked = onMarkerClicked
 
     $timeout(function () {

example/example.html

@@ -77,6 +77,9 @@ <h1>angular-google-maps example</h1>
 				events="map.events">
 				<trafficlayer show="map.showTraffic" />
 
+				<markers models="map.randomMarkers" coords="'self'" icon="'icon'" click="'onClicked'" doCluster="true">
+				</markers>
+
 				<markers models="map.markers2" coords="'self'" icon="'icon'" click="'onClicked'">
 					<windows show="'showWindow'" closeClick="'closeClick'">
 						<p ng-non-bindable >This is an info window at {{ latitude | number:4 }}, {{ longitude | number:4 }}!</p>
@@ -134,6 +137,15 @@ <h1>angular-google-maps example</h1>
 								<input type="checkbox" text="TrafficLayer On/Off" ng-model="map.showTraffic">
 							</td>
 						</tr>
+						<tr>	
+							<td>Generate Random Markers</td>
+							<td>
+								<div ng-init="numOfMarkers = 1000">
+									<input type="text" text="Number of Markers" ng-model="numOfMarkers">
+									<button ng-click="genRandomMarkers(numOfMarkers)">Generate</button>
+								</div>
+							</td>
+						</tr>
 						<tr>
 							<td>markers</td>
 							<td>

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

@@ -8,7 +8,7 @@
 		constructor: (scope, element, attrs, mapCtrl,$timeout) ->
 			super(scope, element, attrs, mapCtrl,$timeout)
 			self = @
-			opts = @createMarkerOptions(scope.coords,scope.icon,scope.options,mapCtrl)
+			opts = @createMarkerOptions(scope.coords,scope.icon,scope.options,mapCtrl.getMap())
 			#using scope.$id as the identifier for a marker as scope.$id should be unique, no need for an index (as it is the index)
 			@gMarker = new google.maps.Marker(opts)
 			element.data('instance', @gMarker)
@@ -48,7 +48,7 @@
 					if scope.coords? and scope.icon? and scope.options
 						@gMarker.setMap(null)
 						delete @gMarker			
-						@gMarker = new google.maps.Marker(@createMarkerOptions(scope.coords,scope.icon,scope.options,@mapCtrl))
+						@gMarker = new google.maps.Marker(@createMarkerOptions(scope.coords,scope.icon,scope.options,@mapCtrl.getMap()))
 				else 			
 
 

src/coffee/directives/api/utils/gmap-util.coffee

@@ -6,7 +6,7 @@
 				icon: icon,
 				visible: coords.latitude? and coords.longitude?
 			})
-			opts.map = map: map.getMap() if map?
+			opts.map = map if map?
 			opts
 
 		createWindowOptions:(gMarker,scope,content,defaults) ->