issue allenhwkim#250, added an event 'objectChanged', and used it to zoom to incluce all markers

allenhwkim · allenhwkim · commit 3a64ccbaf84d · 2015-07-28T00:04:51.000-04:00
diff --git a/directives/map.js b/directives/map.js
@@ -170,7 +170,12 @@
         scope.map.scope = scope;
         google.maps.event.addListenerOnce(map, "idle", function() {
           scope.$emit('mapInitialized', map);  
-          if (attrs.zoomToIncludeMarkers) {
+          if (attrs.zoomToIncludeMarkers == 'auto') {
+            scope.$on('objectChanged', function(evt, msg) {
+              console.log('objectChanged name', msg);
+              msg[0] == 'markers' && ctrl.zoomToIncludeMarkers();
+            });
+          }else if (attrs.zoomToIncludeMarkers) {
             console.log('zoomToIncludeMarkers');
             ctrl.zoomToIncludeMarkers();
           }
diff --git a/directives/map_controller.js b/directives/map_controller.js
@@ -10,7 +10,7 @@
    * @property {Hash} markers collection of Markers initiated within `map` directive
    * @property {Hash} shapes collection of shapes initiated within `map` directive
    */
-  var MapController = function($q, NavigatorGeolocation, GeoCoder, Attr2Options) { 
+  var MapController = function($scope, $q, NavigatorGeolocation, GeoCoder, Attr2Options) { 
     var parser = Attr2Options;
     var _this = this;
 
@@ -62,6 +62,7 @@
         if (obj.centered && obj.position) {
           this.map.setCenter(obj.position);
         }
+        $scope.$emit('objectChanged', [groupName, this.map[groupName]]);
       } else {
         obj.groupName = groupName;
         this._objects.push(obj);
@@ -85,6 +86,7 @@
 
         /* delete from map */
         obj.map && obj.setMap && obj.setMap(null);
+        $scope.$emit('objectChanged', [groupName, this.map[groupName]]);
       }
     };
 
@@ -177,6 +179,6 @@
 
   }; // MapController
 
-  MapController.$inject = ['$q', 'NavigatorGeolocation', 'GeoCoder', 'Attr2Options'];
+  MapController.$inject = ['$scope', '$q', 'NavigatorGeolocation', 'GeoCoder', 'Attr2Options'];
   angular.module('ngMap').controller('MapController', MapController);
 })();
diff --git a/testapp/map_zoom_to_include_markers.html b/testapp/map_zoom_to_include_markers.html
@@ -3,7 +3,7 @@
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
 <!--
 <script src="../build/scripts/ng-map.min.js"></script>
 -->
@@ -16,7 +16,7 @@
 <script src="../services/navigator_geolocation.js"></script>
 <script src="../services/attr2_options.js"></script>
 <script>
-  function MyCtrl($scope) {
+  angular.module('ngMap').controller('MyCtrl', function($scope) {
     $scope.positions =[ 
       {pos:[40.71, -74.21]},
       {pos:[41.72, -73.20]},
@@ -26,13 +26,19 @@
       {pos:[45.76, -69.16]}, 
       {pos:[46.77, -68.15]}
     ];
-  }
+    $scope.addMarker = function(event) {
+      var ll = event.latLng;
+      console.log('ccccccccccccc', $scope.$id, $scope.map.markers,  {lat:ll.lat(), lng: ll.lng()});
+      $scope.positions.push({pos:[ll.lat(), ll.lng()]});
+      $scope.$apply();
+    }
+  });
 </script>
 </head>
 
 <body>
     <div ng-controller="MyCtrl">
-      <h3>Without zoom-to-include-markers='true'</h3>
+      <h3>Without zoom-to-include-markers</h3>
       <map zoom="11" center="[40.74, -74.18]">
         <marker ng-repeat="p in positions" position="{{p.pos}}" title="pos: {{p.pos}}"></marker>
       </map>
@@ -41,6 +47,12 @@ <h3>With zoom-to-include-markers='true'</h3>
       <map zoom="11" center="[40.74, -74.18]" zoom-to-include-markers="true">
         <marker ng-repeat="p in positions" position="{{p.pos}}" title="pos: {{p.pos}}"></marker>
       </map>
+
+      <h3>With zoom-to-include-markers='auto'</h3>
+      Please click on map to add more markers
+      <map zoom="11" center="[40.74, -74.18]" zoom-to-include-markers="auto" on-click="addMarker()">
+        <marker ng-repeat="p in positions" position="{{p.pos}}" title="pos: {{p.pos}}"></marker>
+      </map>
     </div>
 </body>
 </html>
